jQuery对select和option操作小结
对Select的各种操作(JQuery)
对Select的各种操作(JQuery)对Select的各种操作(JQuery)在写表单时,经常要⽤到select元素,这个元素相较于其他⽤本框标签⽤⽤有不同。
最近在写⽤个页⽤表单时需要对select进⽤各种操作,现将其⽤法收集并总结如下:HTML元素:<select id="relationship" name="relationship" required="true"><option value="1">⽤母</option><option value="2">夫妻</option><option value="3">⽤⽤</option><option value="4">朋友</option><option value="5">其他</option></select>required ⽤般⽤在做校验判断当前选项内容是否为必填,加了required后页⽤会有相应的验证。
对其进⽤各种操作的jQ代码:$(document).ready(function() {//获取下拉框选中项的index属性值var selectIndex = $("#relationship").get(0).selectedIndex;alert(selectIndex);//绑定下拉框change事件,当下来框改变时调⽤ SelectChange()⽤法$("#relationship").change(function() {//todo});//获取下拉框选中项的value属性值var selectValue = $("#relationship").val();alert(selectValue);//获取下拉框选中项的text属性值var selectText = $("#relationship").find("option:selected").text();alert(selectText);//设置下拉框index属性为5的选项选中$("#relationship").get(0).selectedIndex = 5;//设置下拉框value属性为4的选项选中$("#relationship").val(4);//设置下拉框text属性为5的选项选中$("#relationship option[text=5]").attr("selected", "selected");$("#yyt option:contains('5')").attr("selected", true);////获取下拉框最⽤的index属性值var selectMaxIndex = $("#relationship option:last").attr("index");alert(selectMaxIndex);//在下拉框最前添加⽤个选项$("#relationship").prepend("<option value='0'>领导</option>");//在下拉框最后添加⽤个选项$("#relationship").append("<option value='6'>同事</option>");//移除下拉框最后⽤个选项$("#relationship option:last").remove();//移除下拉框 index属性为1的选项$("#relationship option[index=1]").remove();//移除下拉框 value属性为4的选项$("#relationship option[value=4]").remove();//移除下拉框 text属性为5的选项$("#relationship option[text=5]").remove();//清空下拉框$("#relationship").empty(); });。
(完整版)jQuery对select和option操作小结
1.遍历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''>UPSGround</option>").appendTo($("select[@name=ISHIPTYPE]"));}}2.取得下拉選單的選取值$(#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 元素;可以看出有@开头的就表示后面跟的是属性。
jQuerySelector选择器小结
jQuerySelector选择器⼩结//jQuery 选择器 $//$(expression,[context]) return jQuery//Unit One//expression 之 CSS 定义符就是以CSS语法表⽰所要选择的元素// $("*"); // 表⽰页⾯所有元素标签// $("th, td") // 表⽰所有<th><td>元素标签// $("a") // 表⽰所有<a>元素标签// $("div#onlydiv"); // 表⽰CSS选择中id=onlyidv的元素 $("#ID")为全⽂档匹配// $("#rating"); // 表⽰id=rating的元素// $("#orderedlist > li"); // 表⽰id=orderedlist 所有⼦元素,但不包括⼦元素下的⼦元素// $("#orderedlist li:last"); // 表⽰id=orderedlist 中li最后⼀个元素// $("#orderedlist li:first"); // 表⽰id=orderedlist 中li第⼀个元素// $("#orderedlist li:nth- child(0)"); //表⽰id=orderedlist 中li第(N)个元素 n为数组下标// $("button:only-child"); //表⽰ css选择中的它为⽗容器唯⼀的元素// $(".stuff:empty"); // 表⽰css选择中的空元素// $(".buttons:enabled"); // 表⽰css选择中的正常启⽤的元素// $(".buttons:disabled"); // 表⽰css选择中的⾮启⽤元素// $("input:checked"); // 表⽰css选择中的选中的元素// $("button:not(.not)"); // 表⽰css选择中的去除not()中的元素// $("button.not"); // 表⽰css选择中的class=not的元素 $(".CLSS")为全⽂档匹配// $("#orderedlist2 li"); // 表⽰id=orderedlist 所有⼦元素且包括所有⼦元素的⼦元素// //alert($("#orderedlist ~ li").length);// $("#orderedlist,.buttons,li"); //匹配 css选择符的元素//expression 之根据元素属性选择// alert($("button[@class]").length); // 表⽰有class属性的元素// alert($("button[@class=not").length); // 表⽰有class属性且值等于not的元素// alert($('button[@class^=not').length); // 表⽰有class属性且值开头匹配not的元素// alert($('button[@class$=not').length); // 表⽰有class属性且值结尾匹配not的元素// alert($('button[@class*=not').length); // 表⽰有class属性且值中匹配not的元素//expression 之 XPATH 过滤器 XPATH语法来表⽰需要选择的页⾯元素//$("ol[@id^='orderedlist']").find("li:contains('First')").each(function(i) {//// $(this).html( $(this).html() + " BAM! " + i );// $(this).mouseover(function(){// $(this).css("color","red");// });// $(this).mouseout(function(){// $(this).css("color","#000");// });// });//查找ol标签且属性 id=orderedlist的所有元素,这⾥有两种写法//ol[@id='orderedlist'] 定位⽗元素直接⽤each 迭代//ol[@id='orderedlist']/* 所有⽗元素下的⼦元素使⽤find('child- element').each()迭代//Unit two///$( html, [ownerDocument]) return jQuery//这个函数允许传⼊html元素⽂本,构造器会产⽣这个HTML⽂本所创造的jQuery对象,这个对象可以是原本没有的,也可是原本页⾯上存在的//$('<p>hello</p>').appendTo("h2"); //⽣成⼀个标记⽂本并追加到页⾯h2标签内//也可以将原本页⾯元素取出追加//$("input",this).appendTo("h2"); //注意,这⾥取出的页⾯元素,是移动!⽽不是复制///$(elements) return jQuery//这个函数允许直接传⼊DOM//$(document.forms[0].elements).appendTo("h2"); // 可以参考DOM⽂档//$(callback) return jQuery//以下是selector⼀些说明/*基础:#id:根据对象的id属性获取对象。
jquery select2 用法
jquery select2 用法jquery select2 是一个功能强大的下拉框插件,它提供了多种交互和样式选项,可以定制和优化用户体验。
本文将详细介绍jquery select2 的用法,并逐步解释如何实现各种功能。
第一步:安装jquery select2首先,我们需要将jquery select2 这个插件安装到我们的项目中。
可以通过以下两种方法来安装:方法一:CDN引入将以下代码添加到你的HTML文件的`<head>`标签中:html<link href=" rel="stylesheet" /><script src="方法二:本地引入下载jquery select2 的源码包,然后将`select2.min.css` 和`select2.min.js` 文件复制到你的项目中,并在相应的HTML文件中引入。
第二步:创建下拉框接下来,我们需要在HTML文件中创建一个下拉框元素。
可以使用`<select>`标签来创建一个简单的下拉框,如下所示:html<select id="mySelect"></select>第三步:初始化select2要将该下拉框转换为jquery select2 下拉框,我们需要在JavaScript 文件中进行初始化。
在页面加载完成时,使用以下代码来初始化select2:javascript(document).ready(function() {('#mySelect').select2();});第四步:添加选项现在我们已经具备了一个基本的select2 下拉框,但是它还没有任何选项。
可以通过向下拉框中添加`<option>`标签来为其添加选项:html<select id="mySelect"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>第五步:自定义样式一个重要的功能是自定义下拉框的样式。
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`属性。
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最⼤的索引值View Code⼆、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的项选中//设置选中项$("#sel").attr("value",'-sel3');//设置value=-sel3的项⽬为当前选中项View Code三、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'的OptionView Code//清空下拉框$("#search").find("option").remove(); 清空下拉框View Code$("#sel").empty();// 清空下拉框View Code。
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中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的一些常用用法,希望对你有所帮助!。
jquery中select用法
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!");});上述代码将会在点击按钮时触发一个弹窗提示。
jquery操作selectoption的代码小结
jquery操作selectoption的代码⼩结1、获取选中select的value和text,html代码如下:复制代码代码如下:<select id="mySelect"><option value="1">one</option><option value="2">two</option><option value="3">three</option></select>则可通过以下script代码s来获取选中的value和text复制代码代码如下:$("#mySelect").val(); //获取选中记录的value值$("#mySelect option:selected").text(); //获取选中记录的text值2、运⽤new Option("⽂本","值")⽅法添加选项option复制代码代码如下:var obj = document.getElementById("mySelect");obj.add(new Option("4","4"));3、删除所有选项option复制代码代码如下:var obj = document.getElementById("mySelect");obj.options.length = 0;4、删除选中选项option复制代码代码如下:var obj = document.getElementById("mySelect");var index = obj.selectedIndex;obj.options.remove(index);5、修改选中选项option复制代码代码如下:var obj = document.getElementById("mySelect");var index = obj.selectedIndex;obj.options[index] = new Option("three",3); //更改对应的值obj.options[index].selected = true; //保持选中状态6、删除select复制代码代码如下:var obj = document.getElementById("mySelect");obj.parentNode.removeChild(obj); //移除当前对象7、select选择的响应事件复制代码代码如下:$("#mySelect").change(function(){//添加所需要执⾏的操作代码})。
使用jquery操作select(获取选中option的值等)
使⽤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.删除选中项。
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操作select(取值,设置选中)
jquery操作select(取值,设置选中)jquery操作select(增加,删除,清空)$("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中⼀项时触发var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的var checkValue=$("#select_id").val(); //获取Select选择的Valuevar checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值var maxIndex=$("#select_id option:last").attr("index"); //获取Select最⼤的索引值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'的Optiona$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Optiona内容清空:$("#charCity").empty();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最⼤的索引值通过表单-和name 取值var frmCustomer = $("#frmCustomer");//表单$(frmCustomer).find("select[name='is_buy'] option:selected").val()。
浅谈jquery关于select框的取值和赋值
浅谈jquery关于select框的取值和赋值jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其中一项时触发var checkValue = jQuery("#select_id").val(); // 2.获取Select选中项的Valuevar checkText = jQuery("#select_id :selected").text(); // 3.获取Select选中项的Textvar checkIndex = jQuery("#select_id").attr("selectedIndex");// 4.获取Select选中项的索引值,或者:jQuery("#select_id").get(0).selectedIndex;var maxIndex = jQuery("#select_id :last").attr("index"); // 5.获取Select最大的索引值,或者:jQuery("#select_id :last").get(0).index;jQuery("#select_id").get(0).selectedIndex = 1; // 1.设置Select 索引值为1的项选中jQuery("#select_id").val(4); // 2.设置Select的Value值为4的项选中$("#select_id").attr("value","Normal“);$("#select_id").get(0).value = value;//根据select的显示值来为select设值var count=$("#select_id").get(0).options.length;for(var i=0;i<count;i++){if($("#select_id").get(0).options[i].text == text){$("#select_id").get(0).options[i].selected = true;break;}}jQuery("#select_id").append("<option value='新增'>新增option</option>"); // 1.为Select追加一个Option(下拉项) jQuery("#select_id").prepend("<option value='请选择'>请选择</option>"); // 2.为Select插入一个Option(第一个位置) jQuery("#select_id").get(0).remove(1); // 3.删除Select中索引值为1的Option(第二个)jQuery("#select_id :last").remove(); // 4.删除Select中索引值最大Option(最后一个)jQuery("#select_id [value='3']").remove(); // 5.删除Select中Value='3'的OptionjQuery("#select_id").empty(); // 6.清空下拉列表。
jquery操作select常见方法大全【7种情况】
jquery操作select常见⽅法⼤全【7种情况】本⽂实例讲述了jquery操作select常见⽅法。
分享给⼤家供⼤家参考,具体如下:在前段HTML页⾯设计中select 下拉框,或者在 multiple="multiple" 时,表现为列表。
经常会在页⾯上对其进⾏操作,这些操作不外乎:1. 得到选中的 select 的 option 的值或者text.2. 删除选中的 select 的 option.3. 向select中增加新的option.4. 得到select option 长度,也就是个数size5. 清空select.6. 两个select 框之间互相添加删除,从左边到右边,从右边到左边的操作,通常是多选情况。
7. 判断在 select 框中是否存在某⼀个值的选项对第⼀种情况,⽤如下⽅法:$("#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的项选中对第⼆种情况,删除的处理:$("#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如果要删除选中的option ,则需要先得到选中option 的序号. var checkIndex=$("#select_id ").get(0).selectedIndex;然后再调⽤上⾯的⽅法删除.对第三种情况,增加option 的处理:$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加⼀个Option(下拉项)$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插⼊⼀个Option(第⼀个位置)对第四种情况,得到select 的长度var totalcount=$("#single_user_choice").get(0).options.length;第五种情况,清空select$("#single_user_choice").get(0).options.length=0;第六种情况。
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 元素;可以看出有@开头的就表示后面跟的是属性。
jsselectoption对象小结
jsselectoption对象⼩结var e = document.getElementById("selectId");e. options= new Option("⽂本","值") ;//创建⼀个option对象,即在<select>标签中创建⼀个或多个<option value="值">⽂本</option>//options是个数组,⾥⾯可以存放多个<option value="值">⽂本</option>这样的标签length属性---------长度属性selectedIndex属性--------当前被选中的框中的⽂本的索引值,此索引值是内存⾃动分配的(0,1,2,3.....)对应(第⼀个⽂本值,第⼆个⽂本值,第三个⽂本值,第四个⽂本值..........)(---obj.options[obj.selecedIndex]是指定的某个<option>标签,是⼀个---)text属性---------返回/指定⽂本value属性------返回/指定值,与<options value="...">⼀致。
index属性-------返回下标,selected 属性-------返回/指定该对象是否被选中.通过指定 true 或者 false,可以动态的改变选中项defaultSelected 属性-----返回该对象默认是否被选中。
true / false。
增加⼀个<option>标签-----obj.options.add(new("⽂本","值"));<增>删除⼀个<option>标签-----obj.options.remove(obj.selectedIndex)<删>获得⼀个<option>标签的⽂本-----obj.options[obj.selectedIndex].text<查>修改⼀个<option>标签的值-----obj.options[obj.selectedIndex]=new Option("新⽂本","新值")<改>删除所有<option>标签-----obj.options.length = 0获得⼀个<option>标签的值-----obj.options[obj.selectedIndex].value注意:a:上⾯的写的是如这样类型的⽅法obj.options.function()⽽不写obj.funciton,是因为为了考虑在IE和FF 下的兼容,如obj.add()只能在IE中有效.b:obj.option中的option不需要⼤写,new Option中的Option需要⼤写复制代码代码如下:<html><head><script language="javascript">function number(){var obj = document.getElementById("mySelect");//obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在当前选中的那个的值中改变//obj.options.add(new Option("我的吃吃","4"));再添加⼀个option//alert(obj.selectedIndex);//显⽰序号,option⾃⼰设置的//obj.options[obj.selectedIndex].text = "我的吃吃";更改值//obj.remove(obj.selectedIndex);删除功能}</script></head><body><select id="mySelect"><option>我的包包</option><option>我的本本</option><option>我的油油</option><option>我的担⼦</option></select><input type="button" name="button" value="查看结果" onclick="number();"></body></html>根据这些东西,⾃⼰⽤JQEURY AJAX+JSON实现了⼀个⼩功能如下:JS代码:(只取了于SELECT相关的代码)复制代码代码如下:/*** @description 构件联动下拉列表 (⽤JQUERY 的AJAX配合JSON实现)* @prarm selectId 下拉列表的ID* @prarm method 要调⽤的⽅法名称* @prarm temp 此处存放软件ID* @prarm url 要跳转的地址*/function linkAgeJson(selectId,method,temp,url){$j.ajax({type: "get",//使⽤get⽅法访问后台dataType: "json",//返回json格式的数据url: url,//要访问的后台地址data: "method=" + method+"&temp="+temp,//要发送的数据success: function(msg){//msg为返回的数据,在这⾥做数据绑定var data = msg.lists;coverJsonToHtml(selectId,data);}});}/*** @description 将JSON数据转换成HTML数据格式* @prarm selectId 下拉列表的ID* @prarm nodeArray 返回的JSON数组**/function coverJsonToHtml(selectId,nodeArray){//get selectvar tempSelect=$j("#"+selectId);//clear select valueisClearSelect(selectId,'0');var tempOption=null;for(var i=0;i<nodeArray.length;i++){//create select OptiontempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> '); //put Option to selecttempSelect.append(tempOption);}// 获取退化构件列表getCpgjThgl(selectId,'thgjDm');}/*** @description 清空下拉列表的值* @prarm selectId 下拉列表的ID* @prarm index 开始清空的下标位置*/function isClearSelect(selectId,index){var length=document.getElementById(selectId).options.length;while(length!=index){//长度是在变化的,因为必须重新获取length=document.getElementById(selectId).options.length;for(var i=index;i<length;i++)document.getElementById(selectId).options.remove(i);length=length/2;}}/*** @description 获取退化构件列表* @prarm selectId1 引⽤软件下拉列表的ID* @prarm selectId2 退化构件下拉列表的ID*/function getCpgjThgl(selectId1,selectId2){var obj1=document.getElementById(selectId1);//引⽤软件下拉列表var obj2=document.getElementById(selectId2);//退化构件下拉列表var len=obj1.options.length;//当引⽤软件列表长度等于1时返回,不做操作if(len==1){return false;}//清空下拉列表的值,两种⽅式都可以// isClearSelect(selectId2,'1');document.getElementById(selectId2).length=1;for(var i=0;i<len; i++){var option= obj1.options[i];//引⽤软件被选中项不加⼊if(i!=obj1.selectedIndex){//克隆OPTION并添加到SELECT中obj2.appendChild(option.cloneNode(true));}}}HTML代码:复制代码代码如下:<TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1><tr><td class="Search_item_18"> <span class="Edit_mustinput">*</span>引⽤软件:</td><td class="Search_content_82"><input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" ><input name="yyrjDm" id="yyrjDm" type="hidden" ><input type="button" class="Search_button_select"onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="选择..."></td></tr><tr><td class="Search_item"> <span class="Edit_mustinput">*</span>引⽤分版:</td><td class="Search_content" id="yyfb"><select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')"> </select></td></tr><tr><td class="Search_item">退化构件:</td><td class="Search_content" id="thgj"><select name="thgjDm" style="width:160" id="thgjDm"><option value="-1" selected>⽆</option></select></td></tr></TABLE>。
jqueryselect(列表)的操作(取值赋值)
jqueryselect( 列 表 ) 的 操 作 ( 取 值 赋 值 )
jquery的使用方法,看了jquery_api帮助文档和官方的文档,基本所有的用法都可以找到。 但却没有找到对<select>列表的操作。 jquery对<select>的操作比较麻烦,我把常用的收集如下: 1.获取选中值:$("select[@id='pagesize_slt'] option[@selected]").val();//-----pagesize_slt是<select>的id 2.设置选中项:$("select[@id='pagesize_slt']")[0].selectedIndex = 1;//-----<select>的index从0开始,所以1是第二项 很奇怪的是,我是用id来获取的,应该是唯一值,但$("select[@id='pagesize_slt']").selectedIndex = 1;是不对的。必须加[0]。 也就是说,$("select[@id='pagesize_slt']")返回的其实是一个数组。这点需要注意。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
1.遍历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''>UPSGround</option>").appendTo($("select[@name=ISHIPTYPE]"));}}2.取得下拉選單的選取值$(#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 元素;可以看出有@开头的就表示后面跟的是属性。
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 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的项目为当前选中项$("<optionvalue=''1''& gt;1111</option><optionvalue=''2''>2222</option>").appendTo("#sel")//添加下拉框的option$("#sel").empty();// 清空下拉框获取一组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><optionvalue=''2''>2222</option>").appendTo("#sel")//添加下拉框的option$("#sel").empty();// 清空下拉框。