HTML中获取select的值的总结

我们无法进步的原因，往往是因为我们总是看起来很努力，但是却没有什么行动效率。$("#selectID option[text=5]").attr("selected", "selected");//这样的获取方式不对正确写法应该是：$("#yyt option:contains('5')").attr("selected", true);关于option的一些写法总结，我找到了一篇很实用基础的文章

蜗牛2020

5317人浏览 · 2021-08-11 14:57:50

蜗牛2020 · 2021-08-11 14:57:50 发布

$("#selectID option[text=5]").attr("selected", "selected");//这样的获取方式不对

正确写法应该是：

$("#yyt option:contains('5')").attr("selected", true);

关于option的一些写法总结，我找到了一篇很实用基础的文章，原本链接：https://www.cnblogs.com/gengaixue/archive/2011/07/28/2119040.html

也可以看下面的写法（一样）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="yyt">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
		</select>
	</body>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript">
		// $(document).ready(function() {
					绑定下拉框change事件，当下来框改变时调用 SelectChange()方法
					      $("#selectID").change(function() { SelectChange(); }); 
					      })
					      function SelectChange() {
						//获取下拉框选中项的text属性值
						var selectText = $("#selectID").find("option:selected").text();
						console.log(selectText);
						//获取下拉框选中项的value属性值
						var selectValue = $("#selectID").val();
						console.log(selectValue);
						//获取下拉框选中项的index属性值
						var selectIndex = $("#selectID").get(0).selectedIndex;
						console.log(selectIndex);
						获取下拉框最大的index属性值
						var selectMaxIndex = $("#selectID option:last").attr("index");
						console.log(selectMaxIndex);
					}
					cc()
 
					function aa() {
						//设置下拉框index属性为5的选项 选中
						$("#selectID").get(0).selectedIndex = 5;
					}
 
					function bb() {
						//设置下拉框value属性为4的选项 选中
						$("#selectID").val(4);
					}
 
					function cc() {
						//设置下拉框text属性为5的选项 选中
						$("#yyt option:contains('5')").attr("selected", true);
					}
 
					function dd() {
						//在下拉框最后添加一个选项
						$("#selectID").append("<option value='7'>7</option>");
					}
 
					function ee() {
						//在下拉框最前添加一个选项
						$("#selectID").prepend("<option value='0'>0</option>")
					}
 
					function ff() {
						//移除下拉框最后一个选项
						$("#selectID option:last").remove();
					}
 
					function gg() {
						//移除下拉框 index属性为1的选项
						$("#selectID option[index=1]").remove();
					}
 
					function hh() {
						//移除下拉框 value属性为4的选项
						$("#selectID option[value=4]").remove();
					}
 
					function ii() {
						//移除下拉框 text属性为5的选项
						$("#selectID option[text=5]").remove();
					}
	</script>
</html>