jQuery获取Select选择的Text和 Value

合集下载

JQueryselect（下拉框）操作方法汇总

JQueryselect（下拉框）操作⽅法汇总1. 获取选中项：获取选中项的Value值：复制代码代码如下:$('select#sel option:selected').val();或者复制代码代码如下:$('select#sel').find('option:selected').val();获取选中项的Text值：复制代码代码如下:$('select#seloption:selected').text();或者复制代码代码如下:$('select#sel').find('option:selected').text();2. 获取当前选中项的索引值：复制代码代码如下:$('select#sel').get(0).selectedIndex;3. 获取当前option的最⼤索引值：复制代码代码如下:$('select#sel option:last').attr("index")4. 获取DropdownList的长度：复制代码代码如下:$('select#sel')[0].options.length;或者复制代码代码如下:$('select#sel').get(0).options.length;5. 设置第⼀个option为选中值：复制代码代码如下:$('select#sel option:first').attr('selected','true')或者复制代码代码如下:$('select#sel')[0].selectedIndex = 0;6. 设置最后⼀个option为选中值：复制代码代码如下:$('select#sel option:last).attr('selected','true')7. 根据索引值设置任意⼀个option为选中值：复制代码代码如下:$('select#sel')[0].selectedIndex =索引值;索引值=0,1,2....8. 设置Value=4 的option为选中值：复制代码代码如下:$('select#sel').attr('value','4');或者复制代码代码如下:$("select#sel option[value='4']").attr('selected', 'true');9. 删除Value=3的option：复制代码代码如下:$("select#sel option[value='3']").remove();10.删除第⼏个option：复制代码代码如下:$(" select#sel option ").eq(索引值).remove();索引值=0,1,2....如删除第3个Radio:复制代码代码如下:$(" select#sel option ").eq(2).remove();11.删除第⼀个option：复制代码代码如下:$(" select#sel option ").eq(0).remove();或者复制代码代码如下:$("select#sel option:first").remove();12. 删除最后⼀个option：复制代码代码如下:$("select#sel option:last").remove();13. 删除dropdownlist:复制代码代码如下:$("select#sel").remove();14.在select后⾯添加⼀个option:复制代码代码如下:$("select#sel").append("<option value='6'>f</option>"); 15. 在select前⾯添加⼀个option:复制代码代码如下:$("select#sel").prepend("<option value='0'>0</option>"); 16. 遍历option：复制代码代码如下:$(' select#sel option ').each(function (index, domEle) { //写⼊代码});。

jQuery获取Radio选择的Value值

<input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
<script type="text/javascript">
$("#chk_all").click(function() { $("input[name='chk_list']").attr("checked",$(this).attr("checked"));});
for (var i=0;i<arrChk.length;i++){ alert(arrChk[i].value); }
</script>
<script type="text/javascript">
var arrChk=$("input[name='chk_list']:checked"); $(arrChk).each(function() { window.alert(this.value); }); });</script>
3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
jQuery添加/删除Select的Option项：
点击一次，Select将追加一个Option
点击将在Select第一个位置插入一个Option

点击select下拉框获取option的属性值

点击select下拉框获取option的属性值select下拉框作为前端开发者应该是经常使⽤的，最近在项⽬中遇到这样的情况，点击下拉框选项，需要获取所点击的option的属性值，当时想很简单啊，给option加⼀个点击事件不就⾏了，然后就加了⼀下，结果⼀运⾏悲催了，怎么点击option事件就是不会执⾏。

这是为什么呢，刚开始也不懂，之前没遇到过这样的需求，后来经过学习，才恍然⼤悟，原来select option没有点击事件，要想获得所选option的属性值，需要通过jquery的change()⽅法来获取，下⾯通过代码解释⼀下，代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title></head><body><div><select id="choice"><option value="1">东⽅1</option><option value="2">东⽅2</option><option value="3">东⽅3</option><option value="4">东⽅4</option></select></div></body><script src="js/jquery-2.1.4.min.js"></script><script>$("#choice").change(function () {let $dom = $("#choice");let index = $dom[0].options[$dom[0].selectedIndex].value;alert(index);});</script></html>如上⾯代码所⽰，给select添加change()⽅法，⽤来监听下拉框的变化，当点击下拉框option进⾏选择时，select发⽣变化，触发change()事件，$dom[0].selectedIndex表⽰点击option的索引值，select option的索引值默认从0开始，$dom[0].options[$dom[0].selectedIndex]表⽰所点击option对象，取到对象之后就可以取相应的属性值了。

如何获取select下拉框的值（option没有及有value属性）

如何获取select下拉框的值（option没有及有value属性）如何获取select下拉框的值：1.下拉框的option没有value属性时复制代码代码如下:<select id="param1"><option>学号</option><option>姓名</option><option>年龄</option></seclect><script>window.onload = funciton(){var param = document.getElementById("param1");param.onchange = getParam(){var text = param.value;}}</script>2.下拉框的option有value属性时复制代码代码如下:<select id="param1"><option>学号</option><option>姓名</option><option>年龄</option></seclect><script>window.onload = funciton(){var param = document.getElementById("param1");param.onchange = getParam(){var selectIndex = param.selectIndex; //获得被选项的引索号var text = param.options[selectIndex].text;</script>。

Jquery表单取值赋值的一些基本操作

5. 维护元素
在body中增加一个元素
$(”body”).append(”<input type=’text’ value=’asd’ />”)
该语句会把这段html插入到body结束标签之前, 结果是<input type=’text’ value=’asd’ /></body>
$(”body”).prepend(”<input type=’text’ value=’asd’ />”)
获取一组名为(items)的radio被选中项的值
var item = $('input[@name=items][@checked]').val();//若未被选中则val() = undefined
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
/*获得TEXT.AREATEXT的值*/
var textval = $("#text_id").attr("value");
//或者
var textval = $("#text_id").val();
/*获取单选按钮的值*/
var valradio = $("input[@type=radio][@checked]").val();
/*获取下拉列表的值*/
var selectval = $('#select_id').val();
//文本框，文本区域：
$("#text_id").attr("value",'');//清空内容

『jQuery』.html(),.text()和.val()的概述及使用

结果上面代码会弹出一个警告框，显示原始的HTML标记内的元素，如上图所示。

上面是HTML Markup效果从上面效果图中我们可以明显的看出，同样的一段jQuery代码，所得到的效果不一样。

这里再次证明了如果你调用多个选定元素的素，换句话说：如果选择器匹配多于一个的元素，那么只有第一个匹配元素的从上面的效果中我们得知：如果使用.html(htmlStrong)方法匹配在多个元素上，那么多个匹配元素将的是.html(htmlString)方法中指定的“htmlString”结构。

换句话，如果你使用中的“htmlString”所替代。

就如上图所示。

3。

使用一个回调函数来替换一个元素的HTML内容语法：$("Element").html(function(index,html){...});返回值：jQuery对象效果：操作元素的纯文本内容——.text()前面的.html()方法让你可以读取或修改元素的HTML内容用方法：1、读取文本内容——.text()语法：$("Element").text();效果：从上面的效果中我们得知：使用.text()方法，我们只读取元素的纯文本内容，包括他的后代元素，而此元素中的下文本内容。

效果：2、替换文本内容——.text(textString)语法$("Element").text(textString);//textString返回值：jQuery对象效果图上可以得知，.text(textString)方法会将HTML标签当作纯文本内容来替换元素的旧内容，这一点和如果匹配多个元素时，采用的.html(htmlString)进行比较。

不过他们有一个相同之处：如果匹配多个元素时，采用3、使用一个回调函数来替换一个元素的文本内容.text()方法和.html()方法一样，也要以通过一个回调函数来动态的替换多个元素的内容，不致于像效果操作表单字段Value值——.val()前面介绍的.html()和.text()都无法在input元素上操作，那么我们接着看一个1、获取表单元素值——.val()语法效果.val()返回的是匹配的元素集合中的第一个，有时你想返回选中的系，就如上图所示，如果你想返回你选择的值，你就需要像下面这样操作，才能得到选中的值：复制代码代码如下:。

jquery操作select方法汇总

本文实例汇总了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("<option value='Value'>Text</option>");//为Select追加一个Option(下拉项)$("#select_id").prepend("<option value='0'>请选择</option>");//为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程序设计有所帮助。

JSJQuery动态添加selectoption

JSJQuery动态添加selectoption今天有朋友问我⼀个关于在<select>⾥动态添加option问题，⼀开始以为是JS那⾥动态添加，所以⽤了JS动态添加option的⽅法，但你那⾥是⽤JQuery的，所以才会⼀直出错，下⾯记下在JS和JQuery⾥添加option的区别。

JS：var selid = document.getElementById("sltid");for(var i=0; i<10;i++){ //循环添加多个值sid.option[i] = new Option(i,i);}sid.options[sid.options.length]=new Option("1","2"); // 在最后⼀个值后⾯添加多⼀个JQuery：$("#selectId").append("<option value='"+value+"'>"+text+"</option>");当然除了这句，还有设置默认选择值、第⼀个的值、最后⼀个的值、第N个的值等等的，所以在⽹上搜了⼀上：jQuery获取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的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'的Option5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option以上所述是⼩编给⼤家介绍的JS & JQuery 动态添加 select option的相关知识，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

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()
{

jq 操作radio,设置选中、获取选中值

2012年12月29日TAG: jq操作radio<label><input type="radio" name="sex" value="1">男</label><label><input type="radio" name="sex" value="2">女</label>JQ获取被选中的值：$(':radio[name="sex"]:checked').val();JQ设置为选中：$(':radio[name="sex"]').eq(0).attr("checked",true);反选：$(':radio[name="sex"]').eq(0).attr("checked",false);或$(':radio[name="sex"]').eq(0).attr("checked",'');if($(':radio[name="sex"]').attr('checked')==undefined) //判断是否已经选中$(':radio[name="sex"]').attr("checked",'10');//设置value=10的单选按钮为选中项下拉框select： $(':select[name="sex"]').attr("value",'1');//设置value=1的项目为选中项扩展：checkbox 类似；扩展2：获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();orvar item = $('input[name="控件name"]').val();获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();orvar item = $('select[name="控件name"]').val();select下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[@name=items]').get(1).checked = true;$('input[name="控件name"]').eq(1).checked = true;获取值：文本框，文本区域$("#txt").attr("value")；or$("#txt").val();多选框checkbox$("#checkbox_id").attr("value")；$("#checkbox_id").val();单选组radio$("input[@type=radio][@checked]").val();$('input[name="控件name"]').val();下拉框select$('#sel').val();控制表单元素文本框，文本区域$("#txt").attr("value",'');//清空内容or$("#txt").val('');$("#txt").attr("value",'11');//填充内容or$("#txt").val('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()；//清空下拉框。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

一、jQuery获取Select选择的Text和Value:语法解释：1.$("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发2.varcheckText=$("#select_id").find("option:selected").text(); //获取Select选择的Text3.varcheckValue=$("#select_id").val(); //获取Select选择的Value4.varcheckIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值5.varmaxIndex=$("#select_idoption: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_idoption:last").remove(); //删除Select中索引值最大Option(最后一个)4.$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)5.$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option6.$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option四、获取值1.jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();2.获取select被选中项的文本:var item = $("select[@name=items] option[@selected]").text();3.select下拉框的第二个元素为当前选中值:$('#select_id')[0].selectedIndex = 1;4.radio单选组的第二个元素为当前选中值:$('input[@name=items]').get(1).checked = true;5.文本框，文本区域：$("#txt").attr("value")；6.多选框checkbox：$("#checkbox_id").attr("value")；7.单选组radio：$("input[@type=radio][@checked]").val();8.下拉框select：$('#sel').val();五、控制表单元素：1.文本框，文本区域：$("#txt").attr("value",'');//清空内容2.$("#txt").attr("value",'11');//填充内容3.多选框checkbox：$("#chk1").attr("checked",'');//不打勾4.$("#chk2").attr("checked",true);//打勾5.if($("#chk1").attr('checked')==undefined) //判断是否已经打勾6.单选组radio：$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项7.下拉框select：$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项8.$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option9.$("#sel").empty()；//清空下拉框10.//遍历option和添加、移除optionfunctionchangeShipMethod(shipping){varlen = $("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]"));}}//取得下拉選單的選取值$(#testSelectoption:selected').text();或$("#testSelect").find('option:selected').text();或$("#testSelect").val();六、下拉框:1.var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)2.var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值3.var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值4.$("#select").empty();//清空下拉框//$("#select").html('');5.$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option稍微解释:1.select[@name='country'] option[@selected] 表示具有name 属性，并且该属性值为'country' 的select元素里面的具有selected 属性的option 元素；可以看出有@开头的就表示后面跟的是属性。

2.单选框:$("input[@type=radio][@checked]").val(); //得到单选框的选中项的值(注意中间没有空格)$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)3.复选框:$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值$("input[@type=checkbox][@checked]").each(function() { //由于复选框一般选中的是多个,所以可以循环输出alert($(this).val());});$("#chk1").attr("checked",'');//不打勾$("#chk2").attr("checked",true);// 打勾if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾当然jquery的选择器是强大的. 还有很多方法.<script src="jquery-1.2.1.js" type="text/javascript"></script><script language="javascript" type="text/javascript">$(document).ready(function(){$("#selectTest").change(function(){//alert("Hello");//alert($("#selectTest").attr("name"));//$("a").attr("href","xx.html");//window.location.href="xx.html";//alert($("#selectTest").val());alert($("#selectTest option[@selected]").text());$("#selectTest").attr("value", "2");});});</script><a href="#">aaass</a><select id="selectTest" name="selectTest"><option value="1">11</option><option value="2">22</option><option value="3">33</option><option value="4">44</option><option value="5">55</option><option value="6">66</option></select>jQuery获取Select选择的Text和Value:$("#slc1").change(function(){ varcheckText=$("#slc1").find("option:selected").text();varcheckValue=$("#slc1").val(); varcheckIndex=$("#slc1 ").get(0).selectedIndex; varmaxIndex=$("#slc1 option:last").attr("index");alert('您选择的Text是：'+checkText+"\r\n"+"您选择的Value是："+checkValue+"\r\n您选择的索引值是："+checkIndex+"\r\n最大索引值是："+maxIndex); });语法解释：1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发2. varcheckText=$("#select_id").find("option:selected").text(); //获取Select选择的Text3. varcheckValue=$("#select_id").val(); //获取Select选择的Value4. varcheckIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值5. varmaxIndex=$("#select_idoption: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的项选中$("#btn_index").click(function(){ $("#slc1 ").get(0).selectedIndex=1; });$("#btn_value").click(function(){$("#slc1 ").val(4); });$("#btn_text").click(function(){ $("#slc1option[text='jQuery']").attr("selected", true); });jQuery添加/删除Select的Option项：点击一次，Select将追加一个Option点击将在Select第一个位置插入一个Option点击将删除Select中索引值最大Option(最后一个)var i=1; varbI=false; $("#btn_add").click(function(){ $("#slc2").append(" "+i+" "); i++; }); $("#btn_insert_first").click(function(){ if (!bI) { $("#slc2").prepend("请选择"); bI=true; } }); $("#btn_del").click(function(){ $("#slc2 option:last").remove(); });语法解释：1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)3. $("#select_idoption:last").remove(); //删除Select中索引值最大Option(最后一个)4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option。