Jquery设置下拉框select中的option选中
jquery操作select下拉框的多种方法（选中,取值,赋值等）
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'的Option jquery 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").length if(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 元素；可以看出有@开头的就表⽰后⾯跟的是属性。
jqgrid中select选择框获取焦点
jqgrid中select选择框获取焦点
jqgrid中的select选择框是比较常用且精妙的组件，它可以使表格的数据表示的更友好。
但有时却不能像我们想象的那样获取到用户的焦点，诸如编辑新增、粗体字等情况都无法正常获取到select中添加的焦点。
jqgrid提供了一系列api，能够解决select选择框获取焦点的问题。
如
$.jqgrid.setFocus("#id")来设置select获取焦点，numId可以是任何唯一Id。
如果Id没有设置，则只能编辑当前列的数据，点击鼠标右边编辑按钮是没有触发select的聚焦事件的，而调用$.jqgrid.setFocus("#id")就可以解决这个问题。
此外，在不使用$.jqgrid.setFocus("#id") 这个api的情况下，可以给单元格表格项设置一个唯一的id：
$('#serialNumberQry').attr('id','serialNumberQry1')，然后直接利用该id来获取焦点，例如$('#serialNumberQry1').focus()，就可以获取select的焦点。
总之，在jqgrid中，可以通过两种不同的方式对select进行焦点的聚焦，一是通过$.jqgrid.setFocus("#id")设置select的聚焦，另一种是给单元格表格项设置一个唯一的id，然后使用id来获取焦点，这样做可以有效的解决jqgrid中select选择框获取焦点的问题。
option selected 参数
“选项选定”参数是HTML中的一个属性，用于在下拉菜单或列表中预选一个选项。
此参数在网络开发中通常用于创建允许用户从选项列表中选择的表格。
在使用“选项选定”参数时，开发者可以指定在所选列表中的哪个选项在页面加载时应当预选。
这可用于提供默认选择，在填表时节省用户的时间和精力。
如果一个全球信息站为选择用户国家提供了一个下拉菜单，开发者可以使用“选项选定”参数，根据他们的地理位置预先选择用户国家。
这提供了更无缝的用户体验，并减少了不必要的人工选择的需要。
除了设置默认选择之外，“选项选择”参数还可以根据用户输入或其他因素进行动态修改。
这使得用户体验更加互动和个性化，因为预选的选项可以根据用户的动作或选择而改变。
在使用 " 选项选定 " 参数时，一个重要的考虑因素是确保该参数符合无障碍标准。
重要的是要确保预选选项清晰，必要时用户可以轻松更改。
这对于依赖辅助技术或具有具体无障碍需求的用户尤其重要。
" 选项选定 " 参数是网络开发中用于在选定清单中预选选项的宝贵工具。
有效使用时，可以改进用户体验，简化填表过程。
然而，必须慎
重使用这一参数，并考虑无障碍影响，以确保所有用户都获得积极的经验。
jquery操作select
很多朋友对jq uery select的操作很有兴趣，但网上的东西太多，所以脚本之家特别将Jque ry Select操作方法整理下，方便大家查找。
需要注意的是，这里的代码好多是针对jqu ery 1.32以前的版本（以后的版本已经不支持@）,所以替换为空测试下即可。
jQuery获取Selec t选择的Te xt和Val ue:语法解释：1. $("#select_id").change(functio n(){//code...}); //为Select添加事件，当选择其中一项时触发2. var checkTe xt=$("#select_id").find("option:selecte d").text(); //获取Selec t选择的Te x t3. var checkVa lue=$("#select_id").val(); //获取Selec t选择的Va lue4. var checkIn dex=$("#select_id ").get(0).selecte dIndex; //获取Selec t选择的索引值5. var maxInde x=$("#select_id option:last").attr("index"); //获取Selec t最大的索引值jQuery设置Selec t选择的Te xt和Val ue:语法解释：1. $("#select_id ").get(0).selecte dIndex=1; //设置Selec t索引值为1的项选中2. $("#select_id ").val(4); //设置Selec t的Valu e值为4的项选中3. $("#select_id option[text='jQuery']").attr("selecte d", true); //设置Selec t的Text值为jQue ry的项选中jQuery添加/删除Selec t的Opti on项：语法解释：1. $("#select_id").append("<optionvalue='Value'>Text</option>"); //为Select追加一个Op tion(下拉项)2. $("#select_id").prepend("<optionvalue='0'>请选择</option>"); //为Select插入一个Op tion(第一个位置)3. $("#select_id option:last").remove(); //删除Selec t中索引值最大Optio n(最后一个)4. $("#select_id option[index='0']").remove(); //删除Selec t中索引值为0的Opti on(第一个)5. $("#select_id option[value='3']").remove(); //删除Selec t中Valu e='3'的Option5. $("#select_id option[text='4']").remove(); //删除Selec t中Text='4'的Option//遍历optio n和添加、移除optio nfunctio n changeS hipMet hod(shippin g){var len = $("select[@name=ISHIPTY PE] option").lengthif(shippin g.value != "CA"){$("select[@name=ISHIPTY PE] option").each(functio n(){if($(this).val() == 111){$(this).remove();}});}else{$("<optionvalue='111'>UPS Ground</option>").appendT o($("select[@name=ISHIPTY P E]"));}}//取得下拉选单的选取值$(#testSel ect option:selecte d').text();或$("#testSel ect").find('option:selecte d').text();或$("#testSel ect").val();//////////////////////////////////////////////////////////////////记性不好的可以收藏下：1,下拉框:var cc1 = $(".formc select[@name='country'] option[@selecte d]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID 属性值$("#select").empty();//清空下拉框//$("#select").html('');$("<optionvalue='1'>1111</option>").appendT o("#select")//添加下拉框的o ption稍微解释一下:1.select[@name='country'] option[@selecte d] 表示具有nam e 属性，并且该属性值为'country' 的select元素里面的具有se lected属性的opti on 元素；可以看出有@开头的就表示后面跟的是属性。
改变HTML下拉框SELECT选项的多种方法
改变HTML下拉框SELECT选项的多种方法一、使用JavaScript:1. 使用innerHTML属性改变SELECT选项:通过JavaScript的innerHTML属性，可以直接改变SELECT元素的innerHTML，从而改变其中的选项。
例如：```html<select id="mySelect"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select><button onclick="changeOptions(">改变选项</button><script>function changeOptionvar selectElement = document.getElementById("mySelect");selectElement.innerHTML = '<option value="4">选项4</option>' +'<option value="5">选项5</option>';}</script>```2. 使用createElement和appendChild方法动态添加选项:可以使用JavaScript的createElement和appendChild方法，动态创建选项元素，并将其添加到SELECT元素中。
例如：```html<select id="mySelect"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select><button onclick="addOption(">添加选项</button><script>function addOptiovar selectElement = document.getElementById("mySelect");var newOption = document.createElement("option");newOption.value = "4";newOption.text = "选项4";selectElement.appendChild(newOption);}</script>```二、使用CSS:1. 使用display属性控制选项的显示和隐藏:可以使用CSS的display属性，通过控制选项的display值，来改变选项的显示和隐藏。
Select2下拉框总结
Select2下拉框总结⽤了这么久的Select2插件，也该写篇⽂章总结总结。
当初感觉Select2不是特别好⽤，但⼜找不到⽐它更好的下拉框插件。
⼀.⽂件需要引⼊select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上最新版本的select2如果引⽤的jquery版本较低的话，某些功能⽆法正常使⽤。
⽐如：清除功能allowClear: true最新版本请使⽤<select></select>标签（对于本地化的数据你可以使⽤input，但ajax远程数据必须使⽤select）⼆.placeholderplaceholder占位提⽰⽂字，如果需要清除功能，则必须设置placeholder。
三.加载本地数据select2默认的数据属性是id、text，新版本可以⾃定义，但还是⽤默认的⽐较好。
所以提供的json中最好转换为id、text形式，当然可以添加其他属性。
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];$("#c01-select").select2({data: data,placeholder:'请选择',allowClear:true})四.加载远程数据$("#c01-select").select2({ajax: {url: "data.json",dataType: 'json',delay: 250,data: function (params) {return {q: params.term,};},processResults: function (data) {return {results: data};},cache: true},escapeMarkup: function (markup) { return markup; },minimumInputLength: 1,templateResult: formatRepo,templateSelection: formatRepoSelection});说明：1.q: params.term 查询参数（params.term表⽰输⼊框中内容，q发⽣到服务器的参数名；所以这⾥你可以添加⾃定义参数，如：stype:'person'）2.processResults中results: data返回数据（返回最终数据给results，如果我的数据在data.res下，则返回data.res。
jquery获取select选择的文本与值
jquery获取select选择的文本与值获取select ：获取select 选中的 text :$("#ddlregtype").find("option:selected").text();获取select选中的 value:$("#ddlregtype ").val();获取select选中的索引:$("#ddlregtype ").get(0).selectedindex;设置select:设置select 选中的索引：$("#ddlregtype ").get(0).selectedindex=index;//index为索引值设置select 选中的value：$("#ddlregtype ").attr("value","normal“);$("#ddlregtype ").val("normal");$("#ddlregtype ").get(0).value = value;设置select 选中的text:var count=$("#ddlregtype option").length;for(var i=0;i<count;i++){ if($("#ddlregtype ").get(0).options[i].text == text){$("#ddlregtype ").get(0).options[i].selected = true;break;}}$("#select_id option[text='jquery']").attr("selected", true);设置select option项:$("#select_id").append("<option value='value'>text</option>"); //添加一项option $("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option$("#select_id option:last").remove(); //删除索引值最大的option$("#select_id option[index='0']").remove();//删除索引值为0的option$("#select_id option[value='3']").remove(); //删除值为3的option$("#select_id option[text='4']").remove(); //删除text值为4的option清空 select:$("#ddlregtype ").empty();工作需要，要获得两个表单中的值。
jquery操作select下拉框的多种方法(选中取值赋值等)精品
jquery操作select下拉框的多种方法（选中取值赋值等）精品jQuery是一个非常强大的JavaScript库，它提供了很多方便的方法来操作HTML元素，包括select下拉框。
下面我将介绍几种常用的方法来操作select下拉框，包括选中选项、取值和赋值等。
1.选中选项使用jQuery可以很方便地选中select下拉框的选项。
下面是几种常用的方法：- 使用`val(`方法选中指定值的选项：```javascript$("#select").val("option-value");```其中`#select`是select元素的ID，`option-value`是需要选中的选项的值。
- 使用`prop(`方法根据选项的值或文本选中选项：```javascript$("#select option[value='option-value']").prop("selected", true);$("#select option:contains('option-text')").prop("selected", true);```这两种方法都是根据选项的值或文本来选中选项。
第一种方法中`option-value`是需要选中的选项的值，第二种方法中`option-text`是需要选中的选项的文本。
- 使用`attr(`方法根据选项的值或文本选中选项：```javascript$("#select option[value='option-value']").attr("selected", "selected");$("#select option:contains('option-text')").attr("selected", "selected");```这两种方法和前面的方法类似，只是使用的是`attr(`方法来设置`selected`属性。
JS获取select选中的值，所有option值
JS获取select选中的值，所有option值<select name="myselect" id="myselect"> <option value="2042">1--测试⼆级页⾯专题</option> <option value="2031">2--2016年浙江省⼤学⽣艺术节</option> <option value="1983">3--2016⾥约奥运图粹</option> </select>⼀、JS获取： ⼆、Jquery获取： 获取select对象：var myselect = document.getElementById("myselect"); 获取select对象：var myselectjq =$("#myselect");或者$("select[name='myselect']");select下所有option选项：var alloptions = myselect.options; select下所有option选项：var alloptions = $("#myselect option"); 使⽤console.log(alloptions);在控制台中查看结果如图：使⽤console.log(alloptions);在控制台中查看结果如图： 展开其中任⼀下结果中的option，如下图：从上⾯的图中可以看到常⽤的⼀些属性，通过这些属性就可以获取到值、选项：获取选中项的索引：var selectedIndex = myselect.selectedIndex; 获取选中项的索引：var selectedIndex = myselectjq.index(); 注意：此处是index()⽅法，若使⽤alloptions.index()得到的会是最后⼀个option的索引值：2 获取选中项的值(即option的value属性值): 获取选中项的值(即option的value 属性值):var selectedvalue = myselect.options[selectedIndex].value; var selectedvalue = $("#myselect option:selected").value; 获取选中项的⽂本: 获取选中项的⽂本: var selectedtext = myselect.options[selectedIndex].text; var selectedtext = $("#myselect option:selected").text(); 注意：此处是text()⽅法var selectedtext = myselect.options[selectedIndex].innerHTML; var selectedtext = $("#myselectoption:selected").html(); 注意：此处是html()⽅法。
JS实现select选中option触发事件
JS实现select选中option触发事件我们在⽤到下拉列表框select时，需要对选中的option没有触发事件,需要在select中加onchange事件当我们触发select的双击事件时，⽤ondblclick⽅法。
当我们要取得select的选中事件时，⽤document.all['name'].value来获取，其中name是select的名称。
如果我们要得到select的全部的值就⽤⼀个for循环来实现。
代码如下：var vi = document.all['list'].length;for(var i=0;i<vi;i++){document.form2.list(i).value; //form2是<form>的名称}JS实现代码：<select id="pid" onchange="gradeChange()"><option grade="1" value="a">选项⼀</a><option grade="2" value="b">选项⼆</a></select><script type="text/JavaScript">function gradeChange(){var objS = document.getElementById("pid");var grade = objS.options[objS.selectedIndex].grade;alert(grade);}</script>jQuery实现代码：<select name="myselect" id="myselect"><option value="opt1">选项1</option><option value="opt2">选项2</option><option value="opt3">选项3</option></select>$("#myselect").change(function(){var opt=$("#myselect").val();...});Javascript获取select下拉框选中的值现在有⼀id=test的下拉框，怎么拿到选中的那个值呢？分别使⽤javascript原⽣的⽅法和jquery⽅法<select id="test" name=""><option value="1">text1</option><option value="2">text2</option></select>代码:⼀、javascript原⽣的⽅法1. 拿到select对象：var myselect=document.getElementById("test");2. 拿到选中项的索引：var index=myselect.selectedIndex;// selectedIndex代表的是你所选中项的index3. 拿到选中项options的value：myselect.options[index].value;4:拿到选中项options的text：myselect.options[index].text;⼆、jquery⽅法（前提是已经加载了jquery库）1.获取选中的项var options=$("#test option:selected");2.拿到选中项的值alert(options.val());3.拿到选中项的⽂本alert(options.text());。
Jquery操作select
jQuery(this).get(0).options[i].selected = true;
isExist = true;
break;
}
}
if(!isExist)
else{
var index = this.getSelectedIndex();
return jQuery(this).get(0).options[index].text;
}
}
//获得当前选中项的值
{
alert("下拉框中不存在该项");
}
}
//设置选中指定索引项
jQuery.fn.setSelectedIndex = function(index)
{
var count = this.size();
jQuery.fn.removeItem = function(value)
{
if(this.isExistItem(value))
{
var count = this.size();
for(var i=0;i<count;i++)
jQuery.fn.getSelectedValue = function(){
if(this.size() =ห้องสมุดไป่ตู้ 0)
return "下拉框中无选中值";
else
return jQuery(this).val();
}
}
//删除select中选定的项
jQuery.fn.removeSelected = function()
{
下拉select用法
下拉select用法1.引言1.1 概述下拉选择框（select）是一种常见的表单元素，用于提供用户选择的选项。
它允许用户从一个固定的选项列表中选择一个或多个值。
下拉选择框常用于网页表单中，用于收集用户输入的信息，例如国家、城市、日期等。
在Web开发中，下拉选择框的使用非常普遍，因为它提供了用户友好的界面和灵活的选项。
通过下拉选择框，用户可以从预定义的选项中直接选择，而不需要手动输入数据。
这不仅提高了用户的操作效率，还减少了输入错误的可能性。
下拉选择框通常由一个可点击的文本框和一个下拉箭头组成。
当用户点击箭头或者输入框，会展开一个下拉列表，用户可以从中选择一个或多个选项。
选择后，选项的值将显示在文本框中。
除了展示选项，下拉选择框还可以显示默认选项或者当前选中的值。
除了基本的用法，下拉选择框还具有丰富的属性和选项设置，以满足不同的需求。
例如，可以设置下拉选择框的尺寸、宽度、颜色等外观样式。
还可以设置选项的默认值、禁用某些选项、设置多选等功能。
这些属性和选项使得下拉选择框具有更强的扩展性和可定制性。
总之，下拉选择框是一种实用且常用的表单元素，在各种Web应用中都得到了广泛应用。
它为用户提供了方便快捷的选择方式，同时也为开发者提供了灵活多样的定制选项。
在接下来的文章中，我们将详细探讨下拉选择框的基本用法、常用属性和选项，以及它在未来的发展方向。
1.2文章结构文章结构是指一篇文章整体的组织框架和分布方式。
它包括引言、正文和结论三个主要部分，每个部分又可以细化为若干个小节。
在本篇文章中，结构如下：1. 引言1.1 概述1.2 文章结构1.3 目的2. 正文2.1 下拉select的基本用法2.2 下拉select的属性和选项3. 结论3.1 总结下拉select的用法3.2 未来发展方向引言部分主要是对文章主题进行简要说明，概括性地介绍下拉select 的用途和重要性，引起读者的兴趣，并明确文章的目的和结构。
实现select中指定option选中触发事件
实现select中指定option选中触发事件我们在⽤到下拉列表框select时，需要对选中的<option>选项触发事件，其实<option>本⾝没有触发事件⽅法，我们只有在select⾥的onchange⽅法⾥触发。
想添加⼀个option的触发事件,在option中添加onclick 点来点去就是不会触发事件⼜在select中添加onclick 这下可好了,没选option呢就触发了百度来的说option没有触发事件,需要在select中加onchange事件,虽然我曾经处理过类似的问题,⽤过就忘是不是猪脑⼦....这次记住了吧应该当我们触发select的双击事件时，⽤ondblclick⽅法。
当我们要取得select的选中事件时，⽤document.all['name'].value来获取，其中name是select的名称。
如果我们要得到select的全部的值就⽤⼀个for循环来实现。
代码如下：var vi = document.all['list'].length;for(var i=0;i<vi;i++){document.form2.list(i).value; //form2是<form>的名称}<select id="pid" onchange="gradeChange()"><option grade="1" value="a">选项⼀</a><option grade="2" value="b">选项⼆</a></select><script type="text/JavaScript">function gradeChange(){var objS = document.getElementById("pid");var grade = objS.options[objS.selectedIndex].grade;alert(grade);}</script><select name="myselect" id="myselect"><option value="opt1">选项1</option><option value="opt2">选项2</option><option value="opt3">选项3</option></select>$("#myselect").change(function(){var opt=$("#myselect").val();...});。
jquery操作select取值赋值与设置选中实例
jquery操作select取值赋值与设置选中实例本节内容：jquery实现select下拉框的取值与赋值，设置选中的⽅法⼤全。
⽐如<select class="selector"></select>1、设置value为pxx的项选中$(".selector").val("pxx");2、设置text为pxx的项选中$(".selector").find("option[text='pxx']").attr("selected",true);这⾥有⼀个中括号的⽤法，中括号⾥的等号的前⾯是属性名称，不⽤加引号。
很多时候，中括号的运⽤可以使得逻辑变得很简单。
3、获取当前选中项的value$(".selector").val();4、获取当前选中项的text$(".selector").find("option:selected").text();这⾥⽤到了冒号，掌握它的⽤法并举⼀反三也会让代码变得简洁。
很多时候⽤到select的级联，即第⼆个select的值随着第⼀个select选中的值变化。
这在jquery中是⾮常简单的。
例如：$(".selector1").change(function(){// 先清空第⼆个$(".selector2").empty();// 实际的应⽤中，这⾥的option⼀般都是⽤循环⽣成多个了var option = $("<option>").val(1).text("pxx");$(".selector2").append(option);});Js操作Select⼤全判断select选项中是否存在Value="paraValue"的Item向select选项中加⼊⼀个Item从select选项中删除⼀个Item删除select中选中的项修改select选项中 value="paraValue"的text为"paraText"设置select中text="paraText"的第⼀个Item为选中设置select中value="paraValue"的Item为选中得到select的当前选中项的value得到select的当前选中项的text得到select的当前选中项的Index清空select的项js 代码1、判断select选项中是否存在Value="paraValue"的Itemfunction jsSelectIsExitItem(objSelect, objItemValue) {var isExit = false;for (var i = 0; i < objSelect.options.length; i++) {if (objSelect.options[i].value == objItemValue) {isExit = true;break;}return isExit;}2、向select选项中加⼊⼀个Itemfunction jsAddItemToSelect(objSelect, objItemText, objItemValue) {//判断是否存在if (jsSelectIsExitItem(objSelect, objItemValue)) {alert("该Item的Value值已经存在");} else {var varItem = new Option(objItemText, objItemValue);objSelect.options.add(varItem);alert("成功加⼊");}}3、从select选项中删除⼀个Itemfunction jsRemoveItemFromSelect(objSelect, objItemValue) {//判断是否存在if (jsSelectIsExitItem(objSelect, objItemValue)) {for (var i = 0; i < objSelect.options.length; i++) {if (objSelect.options[i].value == objItemValue) {objSelect.options.remove(i);break;}}alert("成功删除");} else {alert("该select中不存在该项");}}4、删除select中选中的项function jsRemoveSelectedItemFromSelect(objSelect) {var length = objSelect.options.length - 1;for(var i = length; i >= 0; i--){if(objSelect[i].selected == true){objSelect.options[i] = null;}}}5、修改select选项中 value="paraValue"的text为"paraText" function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) { //判断是否存在if (jsSelectIsExitItem(objSelect, objItemValue)) {for (var i = 0; i < objSelect.options.length; i++) {if (objSelect.options[i].value == objItemValue) {objSelect.options[i].text = objItemText;break;}}alert("成功修改");} else {alert("该select中不存在该项");}}6、设置select中text="paraText"的第⼀个Item为选中function jsSelectItemByValue(objSelect, objItemText) {//判断是否存在var isExit = false;for (var i = 0; i < objSelect.options.length; i++) {if (objSelect.options[i].text == objItemText) {objSelect.options[i].selected = true;isExit = true;break;}//Show出结果if (isExit) {alert("成功选中");} else {alert("该select中不存在该项");}}7、设置select中value="paraValue"的Item为选中document.all.objSelect.value = objItemValue;8、得到select的当前选中项的valuevar currSelectValue = document.all.objSelect.value;9、得到select的当前选中项的textvar currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;10、得到select的当前选中项的Indexvar currSelectIndex = document.all.objSelect.selectedIndex;11、清空select的项document.all.objSelect.options.length = 0;以上这篇jquery操作select取值赋值与设置选中实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
jQGrid动态填充select下拉框的选项值（动态填充）
jQGrid动态填充select下拉框的选项值（动态填充）本⽂给⼤家分享⼀段代码关于技巧jqgrid动态填充select 下拉框的选项值，⾮常不多说了，直接给⼤家贴代码了，具体代码如下所⽰：function gettypes(){//动态⽣成select内容var str="";$.ajax({type:"post",async:false,url:"checkpersontype",success:function(data){if (data != null) {var jsonobj=eval(data);var length=jsonobj.length;for(var i=0;i<length;i++){if(i!=length-1){str+=jsonobj[i].personType+":"+jsonobj[i].personType+";";}else{str+=jsonobj[i].personType+":"+jsonobj[i].personType;// 这⾥是option⾥⾯的 value:label}}//$.each(jsonobj, function(i){//str+="personType:"+jsonobj[i].personType+";"//$("<option value='" + jsonobj[i].personType + "'>" + jsonobj[i].personType+ "</option>").appendTo(typeselect);//});}alert(str);}});return str;}注意：要return以及async:false否则没有效果在colModel:中设置edittype:'select',editoptions:{value:gettypes()}就ok了。
bootstrap+jQuery实现下拉菜单中复选框全选和全不选效果
bootstrap+jQuery实现下拉菜单中复选框全选和全不选效果前⾔最近⼏天在公司做了个后台管理系统的⼩模块，其中有个功能是实现复选框的全选和全不选，⽤bootstrap和jQuery来实现。
效果是这样：因为是内部⽤，样式也不要求太好看，直接上代码。
⽰例代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><META content="IE=11.0000" http-equiv="X-UA-Compatible"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="lib/bootstrap.min.css" rel="external nofollow" /><link rel="stylesheet" href="style.css" rel="external nofollow" /><style type="text/css">.dropdown-menu {width: 500px;height: 170px;padding: 0;}.dropdown-menu .all {width: 100%;height: 44px;background-color: #f9f9fa;line-height: 44px;padding-left: 10px;}.dropdown-menu input[type="checkbox"] {margin-left: 20px;}label.checkbox {display: inline-block;}.choose_bank label {margin-bottom: 16px;}</style></head><body><div class="btn-group choose_bank" style="height: 22px;"><button class="btn btn-mini" style="padding: 0;width: 120px;background-color: #fff;border: 1px solid #ccc">全部</button><button class="btn btn-mini dropdown-toggle" data-toggle="dropdown" style="height: 22px"><span class="caret"></span></button><div class="dropdown-menu"><label class="all"><input type="checkbox"> 全部</label><label><input type="checkbox"> ⼯商银⾏</label><label><input type="checkbox"> 农业银⾏</label><label><input type="checkbox"> 中国银⾏</label><label><input type="checkbox"> 建设银⾏</label><label><input type="checkbox"> 交通银⾏</label><label><input type="checkbox"> 邮政银⾏</label><label><input type="checkbox"> 招商银⾏</label><label><input type="checkbox"> 中信银⾏</label><label><input type="checkbox"> 民⽣银⾏</label><label><input type="checkbox"> 光⼤银⾏</label><label><input type="checkbox"> 平安银⾏</label><label><input type="checkbox"> 北京银⾏</label></div></div></body><script src="lib/jquery.min.js"></script><script src="lib/bootstrap.min.js"></script><script>var banks = $('.all').siblings().children();$('.all>input').click(function() {var flag = $(this).prop('checked');banks.prop('checked', flag);})banks.click(function() {// 如果有⼀个没选中，全选按钮不选中// 如果全部选中，全选按钮被选中var num = 0;banks.each(function() {if ($(this).prop("checked")) {num++;}})if (num == banks.length) {$('.all>input').prop('checked', true);} else {$('.all>input').prop('checked', false);}})</script></html>总结以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，如有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持。
用jquery获取select标签中选中的option值及文本的示例
⽤jquery获取select标签中选中的option值及⽂本的⽰例1.要想使⽤jquery⾸先html或者jsp中得引⼊jquery⽂件。
2.话不多说，上代码。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../../../../js/common/jquery-1.6.2.js"></script><script type="text/javascript">function doSome(){alert($("#sel option:selected").text());//⽅法⼀：获取select标签选中的option中的⽂本。
alert($("#sel").find("option:selected").text());//⽅法⼆：获取select标签选中的option中的⽂本。
alert($("#sel option:selected").val());//⽅法⼀：获取select标签选中的option中的value的值。
alert($("#sel").find("option:selected").val());//⽅法⼆：获取select标签选中的option中的value的值。
谈谈如何给下拉框option添加点击事件？
谈谈如何给下拉框option添加点击事件？我们在⽤到下拉列表框select时，需要对选中的<option>选项触发事件，其实<option>本⾝没有触发事件⽅法，我们只有在select⾥的onchange⽅法⾥触发。
想添加⼀个option的触发事件,在option中添加onclick 点来点去就是不会触发事件⼜在select中添加onclick 这下可好了,没选option呢就触发了百度来的说option没有触发事件,需要在select中加onchange事件,虽然我曾经处理过类似的问题,⽤过就忘是不是猪脑⼦....这次记住了吧应该当我们触发select的双击事件时，⽤ondblclick⽅法。
当我们要取得select的选中事件时，⽤document.all['name'].value来获取，其中name是select的名称。
如果我们要得到select的全部的值就⽤⼀个for循环来实现。
<select name="myselect" id="myselect"><option value="opt1">选项1</option><option value="opt2">选项2</option><option value="opt3">选项3</option></select>$("#myselect").change(function(){var opt=$("#myselect").val();...});Javascript获取select下拉框选中的值现在有⼀id=test的下拉框，怎么拿到选中的那个值呢？分别使⽤javascript原⽣的⽅法和jquery⽅法<select id="test" name=""><option value="1">text1</option><option value="2">text2</option></select>code:⼀：javascript原⽣的⽅法1:拿到select对象： var myselect=document.getElementById("test");2：拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index 3:拿到选中项options的value： myselect.options[index].value;4:拿到选中项options的text： myselect.options[index].text;⼆：jquery⽅法（前提是已经加载了jquery库）1:var options=$("#test option:selected"); //获取选中的项2:alert(options.val()); //拿到选中项的值3:alert(options.text()); //拿到选中项的⽂本。
如何获取select下拉框选中的的值呢
如何获取select下拉框选中的的值呢<select> 元素（下拉列表）<select> 元素⽤于创建下拉列表；⽽<option> 元素⽤于定义列表中待选择的选项。
列表通常会把⾸个选项显⽰为被选选项。
提⽰：<select> 元素是⼀种表单控件，可⽤于在表单中接受⽤户输⼊。
属性：autofocus ：下拉列表在页⾯加载时⾃动获得焦点，是⼀个布尔属性；disabled：下拉列表应该被禁⽤，被禁⽤的下拉列表既不可⽤，也不可点击。
⽐如你可以设置 disabled 属性，直到满⾜某些条件（⽐如选择⼀个复选框），才恢复⽤户对该下拉列表的使⽤。
然后，可以使⽤ JavaScript 来移除 disabled 属性的值，以使下拉列表变为可⽤状态。
multiple ：可同时选择多个选项。
name ：下拉列表的名称。
⽤于在 JavaScript 中引⽤元素，或者在表单提交后引⽤表单数据。
required ：⽤户在提交表单前必须选择⼀个值。
size ：下拉列表中可见选项的数⽬。
如果 size 属性的值⼤于 1，但是⼩于列表中选项的总数⽬，浏览器会显⽰出滚动条，表⽰可以查看更多选项。
1. 如何设置默认选中呢设置默认选中可在option 中添加 selected = "selected",具体举例如下:<option value="2" selected="selected">test2</option>2. 如何动态创建select对象呢？（1）先动态创建select1.① var mySel = document.createElement("select"); //创建select2.② mySel.id = "citySel"; //为select添加id3.③ document.body.appendChild(mySel); //将select追加到body中4.//创建select5.② mySel.id = "citySel"; //为select添加id6.③ document.body.appendChild(mySel); //将select追加到body中（2）动态创建option1.① var obj=document.getElementById('citySel'); //根据id查找对象2.3.② obj.add(new Option("⽂本","值")); //添加⼀个选项4.//根据id查找对象5.6.② obj.add(new Option("⽂本","值")); //添加⼀个选项3. 删除option（1）删除所有option1.① var obj=document.getElementById('citySel'); //获取select对象② obj.options.length=0; //设置option的length为03.//获取select对象4.② obj.options.length=0; //设置option的length为0（2）删除某⼀个option1.① var obj=document.getElementById('citySel'); //获取select对象2.//获取select对象3.② var i=obj.selectedIndex; //i为要删除选项的下标（取当前选中选项的下标）obj.options.remove(i); //调⽤remove⽅法4. 如何获取或者设置到相对应的值呢？1.<select id="citySel" onchange="selChange()" class="select">2.<option value="">请选择城市</option>3.<option value="sh">上海</option>4.<option value="bj">北京</option>5.<option value="gz">⼴州</option>6.<option value="sz">深圳</option>7.</select>⽅法⼀：javascript1.1：获取select对象:2.var myselect=document.getElementById("citySel");3.4.2：取到选中项的索引:5.var index = myselect.selectedIndex;// selectedIndex是所选中的项的index6.7.8.3：获取选中项的value：9.10.myselect.options[index].value;11.12.4：取到选中项的⽂本内容：13.myselect.options[index].text;14.// selectedIndex是所选中的项的index15.5：获取选中项的value:17.myselect.options[index].value;18.19.6：取到选中项的⽂本内容:20.myselect.options[index].text;⽅法⼆：jquery1.1：var options=$("#citySel option:selected"); //获取选中的option2.3.2：options.val(); //拿到选中项的值，⽐如选中上海，获取的值为“sh”;4.5.3：options.text(); //拿到选中项的⽂本,⽐如选中上海，获取的值为“上海”6.//获取选中的option7.8.2：options.val(); //拿到选中项的值，⽐如选中上海，获取的值为“sh”;9.10.3：options.text(); //拿到选中项的⽂本,⽐如选中上海，获取的值为“上海”。
select2的用法
select2的用法1. 什么是select22. select2的基本用法2.1 引入select22.2 初始化select22.3 设置选项数据2.4 多选和单选3. select2的高级用法3.1 自定义选项模板3.2 远程数据源3.3 事件处理4. select2的主题定制4.1 修改默认样式4.2 自定义主题5. select2的常见问题与解决方案5.1 select2不显示或无法选择选项5.2 select2与其他插件冲突6. 结论1. 什么是select2select2是一个基于jQuery的下拉选择框插件，它提供了更强大、更灵活的功能和样式定制选项，可以用于替代原生的HTML下拉选择框。
select2可以自动处理大量选项数据、支持搜索、多选和单选等功能，同时还提供了丰富的API和事件处理机制，使得开发者可以根据自己的需求进行定制。
2.1 引入select2在开始使用select2之前，首先需要引入select2的相关文件。
可以通过下载源码或使用CDN来获取所需的文件。
一般来说，需要引入select2的CSS和JavaScript文件，以及jQuery库。
在HTML文件中添加以下代码：<link href="select2.min.css" rel="stylesheet" /><script src="jquery.min.js"></script><script src="select2.min.js"></script>2.2 初始化select2在HTML中，可以通过将一个普通的下拉选择框元素转换为select2选择框。
只需在JavaScript中使用select2()方法对元素进行初始化即可。
例如，对于一个id 为mySelect的下拉选择框，可以使用以下代码进行初始化：$("#mySelect").select2();2.3 设置选项数据使用select2时，可以通过<option>标签或JavaScript动态添加选项数据。