【DOC】jquery操作select下拉框的多种方法(选中,取值,赋值等)

Query获取Select选择的Text和Value:语法解释：1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发2. var checkText=$("#select_id").find("option:selected").text(); //获取Select 选择的Text3. var checkValue=$("#select_id").val(); //获取Select选择的Value4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值jQuery设置Select选择的 Text和Value:语法解释：1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select 的Text值为jQuery的项选中jQuery添加/删除Select的Option项：语法解释：1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Optionjquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[@name=items]').get(1).checked = true;获取值：文本框，文本区域：$("#txt").attr("value")；多选框 checkbox：$("#checkbox_id").attr("value")；单选组radio： $("input[@type=radio][@checked]").val();下拉框select： $('#sel').val();控制表单元素：文本框，文本区域：$("#txt").attr("value",'');//清空内容$("#txt").attr("value",'11');//填充内容多选框checkbox： $("#chk1").attr("checked",'');//不打勾$("#chk2").attr("checked",true);//打勾if($("#chk1").attr('checked')==undefined) //判断是否已经打勾单选组 radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项下拉框 select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option$("#sel").empty()；//清空下拉框----------------------------------------------------------------------------------------------------//遍历option和添加、移除optionfunction changeShipMethod(shipping){var len = $("select[@name=ISHIPTYPE] option").lengthif(shipping.value != "CA"){$("select[@name=ISHIPTYPE] option").each(function(){if($(this).val() == 111){$(this).remove();}});}else{$("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));}}//取得下拉選單的選取值$(#testSelect option:selected').text();或$("#testSelect").find('option:selected').text();或$("#testSelect").val();//////////////////////////////////////////////////////////////////记性不好的可以收藏下：1,下拉框:var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值$("#select").empty();//清空下拉框 //$("#select").html('');$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option稍微解释一下:1.select[@name='country'] option[@selected] 表示具有name 属性，并且该属性值为'country' 的select元素里面的具有selected 属性的option 元素；可以看出有@开头的就表示后面跟的是属性。

这篇文章主要介绍了jQuery实现下拉框多选jquery-multiselect 的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下先给大家展示下效果图：除了jquery，需要引用的样式和js文件：&lt;link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" /&gt;&lt;link rel="stylesheet" type="text/css" href="../assets/style.css" /&gt;&lt;link rel="stylesheet" type="text/css" href="../assets/prettify.css" /&gt;&lt;link href="../assets/jquery-ui.css" rel="stylesheet" /&gt;&lt;script src="../assets/jquery.js"&gt;&lt;/script&gt;&lt;script src="../assets/jquery-ui.min.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="../assets/prettify.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="../assets/jquery.multiselect.js" charset=gb2312&gt;&lt;/script&gt;HTML代码：&lt;select title="Basic example" multiple="multiple" name="example-basic" size="5" id="ddlConditions"&gt;&lt;option value="1"&gt;Option 1&lt;/option&gt;&lt;option value="2"&gt;Option 2&lt;/option&gt;&lt;option value="3"&gt;Option 3&lt;/option&gt;&lt;option value="4"&gt;Option 4&lt;/option&gt;&lt;option value="5"&gt;Option 5&lt;/option&gt;&lt;option value="6"&gt;Option 6&lt;/option&gt;&lt;option value="7"&gt;Option 7&lt;/option&gt;&lt;/select&gt;默认选中值1，2，3，绑定指定的选项：var strcondition = '1,2,3';var ids = strcondition.split(',');if (ids != null) {$('#ddlConditions').val(ids);$('#ddlConditions').multiselect("refresh");}获取选中的多个值：首先修改jquery.multiselect.js，添加全局变量multiValues ，用来存放选项值，然后修改update方法，添加multiValues 那一行代码：update: function() {var o = this.options;var $inputs = this.inputs;var $checked = $inputs.filter(':checked');var numChecked = $checked.length;var value;if(numChecked === 0) {value = o.noneSelectedText;} else {if($.isFunction(o.selectedText)) {value = o.selectedText.call(this, numChecked, $inputs.length, $checked.get());} else if(/\d/.test(o.selectedList) &amp;&amp; o.selectedList &gt; 0 &amp;&amp; numChecked &lt;= o.selectedList) {value = $checked.map(function() { return $(this).next().html(); }).get().join(', ');} else {value = o.selectedText.replace('#', numChecked).replace('#', $inputs.length);}multiValues = $checked.map(function () { return $(this).val(); }).get().join(',');}this._setButtonValue(value);return value;},再添加自定义方法：MyValues:function(){return multiValues;},页面使用此自定义方法，获取选中值的代码：if ($('input[name=multiselect_ddlConditions]:checked').length &lt; 1)alert('Please Select Option');else {var strConditions = $("#ddlConditions").multiselect("MyValues");}以上所述是小编给大家介绍的jQuery实现下拉框多选jquery-multiselect 的实例代码，希望对大家有所帮助。

多选下拉框jquery.multiple.select的使⽤介绍:多选下拉选择插件是jQuery插件选择复选框，多元素的。

有单选、多选还有其他分组多选、过滤条件选择等等。

相关API及demo:/p/multiple-select/docs/#multiple-select以下是项⽬中曾⽤的demo:1.⾸先引⽤jquery.multiple.select.js、multiple-select.css2.在页⾯select下拉列表⾥⾯加⼀个multiple="multiple"<select name="nimbusHost" id="nimbusHost" multiple="multiple"><c:forEach items="${stormIps}" var="item"><option value="${item.value}">${item.code}</option></c:forEach></select>3.在页⾯初始化的时候，要在js⾥⾯加⼀段代码:<%--这个是默认选中的--%>var numbusIps='${queryStormBaseConfInfo.nimbusHost}';$('#nimbusHost').multipleSelect({width: '300px',single:true//单选，去掉single就是多选}).multipleSelect('setSelects',[numbusIps]);<%--这个是默认不选中的--%>var numbusIps='${queryStormBaseConfInfo.nimbusHost}';$('#nimbusHost').multipleSelect({width: '300px',single:true//单选，去掉single就是多选});4.提交的时候直接⽤var nimbusHost=$("#nimbusHost").val();就可以得到多选下拉框选中的值。

jquery中select用法jQuery中select的用法1.选择器选择select元素•通过元素选择器直接选择select元素：$("select")•通过id选择器选择指定id的select元素：$("#selectId")•通过class选择器选择指定class的select元素：$(".selectClass")•可以使用其他多种选择器选择指定的select元素，如属性选择器、子选择器等。

2.获取和设置选中项•获取选中项的value值：$("select").val()•获取选中项的文本内容：$("selectoption:selected").text()•设置选中项的value值：$("select").val("value")•设置选中项的文本内容：$("selectoption:selected").text("text")3.获取和设置选项•获取select中所有的选项：$("select option")•获取select中指定value值的选项：$("selectoption[value='value']")•获取select中指定index位置的选项：$("selectoption:eq(index)")（index从0开始）•获取select中第一个选项：$("select option:first")•获取select中最后一个选项：$("select option:last")•获取select中被选中的选项：$("select option:selected")•获取select中被禁用的选项：$("select option:disabled")4.操作选项•添加一个选项：$("select").append("<optionvalue='value'>text</option>")•在指定位置插入一个选项：$("selectoption:eq(index)").before("<optionvalue='value'>text</option>")（index从0开始）•在指定位置后面插入一个选项：$("selectoption:eq(index)").after("<optionvalue='value'>text</option>")（index从0开始）•移除指定的选项：$("selectoption[value='value']").remove()•移除所有选项：$("select option").remove()•禁用指定的选项：$("selectoption[value='value']").prop("disabled", true)•启用指定的选项：$("selectoption[value='value']").prop("disabled", false)5.其他常用方法•获取select元素的属性值：$("select").attr("属性名")•设置select元素的属性值：$("select").attr("属性名", "属性值")•遍历select元素：$("select").each(function() {...})•绑定select元素的change事件：$("select").on("change", function() {...})以上是部分jQuery中select的用法，希望对你有所帮助！6.筛选选项•筛选有指定属性的选项：$("select option[属性名]")•筛选有指定属性且属性值满足条件的选项：$("select option[属性名='属性值']")•筛选有指定class的选项：$("select option[class='class 名']")•筛选被选中的选项：$("select option:selected")•筛选未选中的选项：$("select option:not(:selected)")•筛选被禁用的选项：$("select option:disabled")•筛选未禁用的选项：$("select option:not(:disabled)")7.获取和设置选项属性•获取选项的value值：$("select option").val()•获取选项的文本内容：$("select option").text()•获取选项指定属性的值：$("select option").attr("属性名")•设置选项的value值：$("select option").val("value")•设置选项的文本内容：$("select option").text("text")•设置选项指定属性的值：$("select option").attr("属性名", "属性值")8.监听事件•监听select元素的change事件：$("select").change(function() {...})•监听选项的click事件：$("selectoption").click(function() {...})•监听选项的hover事件：$("selectoption").hover(function() {...}, function() {...})（第一个参数是鼠标进入时触发的函数，第二个参数是鼠标离开时触发的函数）9.动态生成选项•通过循环生成一组选项：for(var i=1; i<=10; i++) { $("select").append("<optionvalue="+i+">"+i+"</option>"); }•根据数组生成选项：var arr = ["选项1", "选项2", "选项3"]; for(var i=0; i<; i++){ $("select").append("<optionvalue="+i+">"+arr[i]+"</option>"); }10.其他常用操作•清空select元素中的所有选项：$("select").empty()•获取select元素中选项的数量：$("select option").length •将select元素设置为禁用状态：$("select").prop("disabled", true)•将select元素设置为启用状态：$("select").prop("disabled", false)以上是关于jQuery中select的一些常用用法，希望对你有所帮助！。

多选下拉框（select下拉多选）⽅法⼀：使⽤.js和 .css实现HTML代码： <select id='checkedLevel' style="width:120px;height:28px;" multiple="multiple"> <option value="1">选项1</option> <option value="2">选项1</option> <option value="3">选项1</option> <option value="4">选项1</option> <option value="5">选项1</option> <option value="6">选项1</option> <option value="7">选项1</option> </select>js代码： $('#checkedLevel').multipleSelect({ addTitle: true, //⿏标点悬停在下拉框时是否显⽰被选中的值 selectAll: false, //是否显⽰全部复选框，默认显⽰ name: "质控级别", selectAllText: "选择全部", //选择全部的复选框的text值 allSelected: "全部", //全部选中后显⽰的值 //delimiter: ', ', //多个值直接的间隔符，默认是逗号 placeholder: "质控级别" //不选择时下拉框显⽰的内容 });//设置默认选中:其中数组中多个值⽤逗号分隔，值是option的value $("#checkedLevel").multipleSelect('setSelects', [1001,1002]);设置选中后关闭下拉框：$('#selectJcjb').multipleSelect("close");//其他的⽅法，可到js中去查看⽅法名，根据实际情况进⾏调⽤。

使⽤jquery操作select（获取选中option的值等）总结下使⽤jQuery操作select的⽅法。

1.获取第⼀个候选项的值。

$('#test option:first').val();2.获取最后⼀个候选项的值。

$('#test option:last').val();3.获取第⼆个候选项的值。

$('#test option:eq(1)').val();4.获取选中的候选项的值。

$('#test').val();$('#test option:selected').val();5.设置值为2的候选项为选中状态。

$('#test').attr('value','2');6.设置最后⼀个候选项为选中。

$('#test option:last').attr('selected','selected');$("#test").attr('value' , $('#test option:last').val());$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());7.获取候选项列表的长度。

$('#test option').length;8.添加⼀个候选项。

$("#test").append("<option value='n+1'>第N+1项</option>");$("<option value='n+1'>第N+1项</option>").appendTo("#test");9.删除选中项。

本文实例汇总了jquery操作select的方法。

分享给大家供大家参考。

具体如下：jQuery获取Select选择的Text和Value:语法解释：复制代码代码如下:$("#select_id").change(function(){//code...});//为Select添加事件，当选择其中一项时触发var checkText=$("#select_id").find("option:selected").text();//获取Select选择的Textvar checkValue=$("#select_id").val();//获取Select选择的Valuevar checkIndex=$("#select_id ").get(0).selectedIndex;//获取Select选择的索引值var maxIndex=$("#select_id option:last").attr("index");//获取Select最大的索引值jQuery设置Select选择的Text和Value:语法解释：复制代码代码如下:$("#select_id ").get(0).selectedIndex=1;//设置Select索引值为1的项选中$("#select_id ").val(4);//设置Select的Value值为4的项选中$("#select_id option[text='jQuery']").attr("selected", true);//设置Select的Text值为jQuery 的项选中jQuery添加/删除Select的Option项：语法解释：复制代码代码如下:$("#select_id").append("&lt;option value='Value'&gt;Text&lt;/option&gt;");//为Select追加一个Option(下拉项)$("#select_id").prepend("&lt;option value='0'&gt;请选择&lt;/option&gt;");//为Select插入一个Option(第一个位置)$("#select_id option:last").remove();//删除Select中索引值最大Option(最后一个)$("#select_id option[index='0']").remove();//删除Select中索引值为0的Option(第一个) $("#select_id option[value='3']").remove();//删除Select中Value='3'的Option$("#select_id option[text='4']").remove();//删除Select中Text='4'的Option希望本文所述对大家的jQuery程序设计有所帮助。

jQuery中select用法1. 简介jQuery是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果等操作。

其中，select是jQuery中一个非常重要的方法，它用于选择HTML元素并对其进行操作。

本文将介绍jQuery中select的用法，包括选择器的基本用法、常见的筛选器、事件绑定和常用操作等内容。

2. 选择器的基本用法在jQuery中，可以使用选择器来选取HTML元素。

选择器可以是元素的名称、类名、ID、属性等等。

下面是一些常见的选择器示例：•选择所有的<p>元素：$("p")•选择类名为myClass的元素：$(".myClass")•选择ID为myId的元素：$("#myId")•选择具有data-name属性的元素：$("[data-name]")除了基本的选择器之外，还可以使用层次选择器、过滤器和子元素选择器等进行更精确的选择。

3. 常见的筛选器除了基本的选择器之外，jQuery还提供了许多常用的筛选器，用于对选取的元素进行进一步的筛选。

下面是一些常见的筛选器示例：•:first：选择第一个匹配的元素•:last：选择最后一个匹配的元素•:even：选择偶数位置的元素•:odd：选择奇数位置的元素•:gt(n)：选择位置大于n的元素•:lt(n)：选择位置小于n的元素•:not(selector)：选择不匹配给定选择器的元素使用筛选器可以更加精确地选择需要操作的元素，提高开发效率。

4. 事件绑定在jQuery中，可以使用on()方法来绑定事件。

on()方法可以绑定多个事件，如click、mouseover、keydown等等。

下面是一个示例：$("button").on("click", function() {alert("Button clicked!");});上述代码将会在点击按钮时触发一个弹窗提示。

select2多选用法
select2是一个基于jQuery的下拉框增强插件，它提供了丰富的功能和灵活的配置选项，其中包括多选功能。

在使用select2进行多选时，首先需要确保引入了select2的相关文件，包括CSS和JavaScript文件。

然后，你需要将原始的select下拉框元素初始化为select2插件，以便启用其多选功能。

在HTML中，你需要将原始的select标签的multiple属性设置为true，以便允许多选。

然后，在JavaScript中，通过调用select2()方法来初始化select2插件，并在初始化时配置multiple: true。

这样就可以实现多选功能了。

另外，你还可以通过配置select2的其他选项来定制多选功能的行为，比如设置最大可选项数、自定义选择框样式、搜索功能等等。

此外，select2还提供了事件回调函数，你可以通过这些回调函数来处理多选过程中的各种交互行为，比如选中、取消选中、搜索等。

总之，使用select2进行多选功能的实现并不复杂，只需要正
确配置插件并了解其相关选项和事件即可。

希望这些信息能够帮助你更好地理解select2的多选用法。