多种方法给select赋值、获取value值、全选、取消全选

最新推荐文章于 2025-03-21 10:00:00 发布

漂移的电子

最新推荐文章于 2025-03-21 10:00:00 发布

阅读量1.2w

点赞数 3

分类专栏： js 文章标签：前端

本文链接：https://blog.csdn.net/weixin_40030173/article/details/106928620

版权

js 专栏收录该内容

51 篇文章

订阅专栏

一、多种方法给select赋值，及获取value值

	<select name="demo_demo"  id="demo">
		<option value="">全部</option>
		<option value="1"  selected="selected">接口</option>
		<option value="2">导表</option>
	</select>

1、多种方法设置select
jquery 赋值

var str='2';

$("#demo").val("1");
$("select[name=demo_demo]").val('1')
$("#demo option[value=" + str + "]").attr('selected', "selected");  
$("#demo option[value=" + str + "]").prop("selected",true);
$('#demo option:selected').text('导表');
// 获取value
$("#demo").val()
$("select[name=demo_demo]").val()
$("select option:selected").val()
$("#demo option:selected").val()
//获取文本
$("select option:selected").text()

原生js重新赋值 && 获取value

document.getElementById("demo").value="2"
document.getElementById("demo").value

2、input框

<input type="text" value="" name="demo_demo" id="demo">

jquery赋值&&获取

 $('#demo').val('内容')   
  $('#demo').val()

原生js 赋值&&获取

document.getElementById('demo').value='内容';   
document.getElementById('demo').value ;

二、 select 全选&&取消全选

<form method="" name="theForm" action="" id="theForm">
   		<select name="select_form" class="st-select" style="width: 224px;height: 320px;" multiple="multiple">
   			<option value="">全部</option>
   			<option value="1">111</option>
   			<option value="2">222</option>
   			<option value="3">333</option>
   		</select>
   	</form>

select下的option全选

for (var i = 0; i < document.theForm.select_form.length; i++) {
	document.theForm.select_form.options[i].selected = true;
}

取消全选
方法一、

for (var i = 0; i < document.theForm.select_form.length; i++) {
	document.theForm.select_form.options[i].selected = false;
}

方法二、

	$("select[name='select_form']").val("");

番外：

把全选或者多选获得的select value值收集成一个数组。（也许你会用得到）

var arr = [];
$(".st-select option:selected").each(function() {
	arr.push($(this).val());  
//	console.log(arr)		//["1", "2", "3"]
});