jQuery获取Select
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 元素;可以看出有@开头的就表示后面跟的是属性。
jQuery对select,readonly,desabled等操作小结
jQuery对select,readonly,desabled等操作⼩结//遍历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 元素;可以看出有@开头的就表⽰后⾯跟的是属性。
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获取Select选择的Text和 Value
一、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 元素;可以看出有@开头的就表示后面跟的是属性。
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
jQuery插件select2利⽤ajax⾼效查询⼤数据列表(可搜索、可分页)select2是⼀款jQuery插件,是普通form表单select组件的升级版。
可以定制搜索、远程数据集(Remote data,本篇主要介绍点)、⽆限滚动(数据分页功能,这⼀点很妙)、还有很多⾼端的参数设置(有需要的下次介绍)。
内置了40种国际化语⾔,不过这⾥我们只需要⽤到中⽂。
同时⽀持现代和传统浏览器内置,甚⾄包括惹⼈不⾼兴的IE8。
那么,现在让我们开始⼀段select2的奇幻之旅吧!⼀、惊艳的效果,来⼀睹为快吧本地实战结果⼆、导⼊css和js到⽹站上1.使⽤CDN,节省⾃⼰⽹站的流量<link href="https:///ajax/libs/select2/4.0.3/css/select2.min.css" rel="external nofollow" rel="stylesheet" /><script src="https:///ajax/libs/select2/4.0.3/js/select2.min.js"></script>2.下载⽂件到本地,可以做⼀些个性的定制(⽐如说修改提⽰语)<!-- select2 --><link rel="stylesheet" type="text/css" href="${ctx}/common/select2/css/select2.css" rel="external nofollow" /><script type="text/javascript" src="${ctx}/common/select2/js/select2.full.js"></script><!-- 中⽂国际化还需要进⾏参数设置 --><script type="text/javascript" src="${ctx}/common/select2/js/i18n/zh-CN.js"></script>三、真⼑真枪的⼲起来第⼀步、定制页⾯个性化元素<select name="parentid" class="js-data-example-ajax" href="${ctx}/member/loadMembersInfo.do?uid=${mem.uid}" rel="external nofollow" style="width:400px" inputMessage="请输⼊会员编号(可部分匹配)"><option selected="selected" value="666">沉默王⼆</option></select>Java端通过name属性可获得select的value值。
请列举jquery中常用的获取属性的方法
请列举jquery中常用的获取属性的方法jQuery中常用的获取属性的方法有很多,它们可以让我们很轻松地读取和修改html元素的属性值。
下面我将简要介绍一下jQuery中常用的获取属性的方法:①attr()方法Atrr()方法可以读取元素的属性值,它可以使用语法:$(selector).attr(attributes). 我们可以在attr()方法中添加属性,如果读取属性则不能添加任何值。
例如:我们可以使用$('p').attr('style';'display:block;')将style属性设为block,也可以使用$('p').attr('style')来获取style属性值。
②prop()方法prop()方法用于读取和配置HTML DOM元素的特性,它同样也可以读取和修改属性值,但它仅用于操作具有Boolean值的属性,例如checked,disabled等特性。
prop()方法用类似于attr()方法:$(selector).prop(properties).③css()方法css()方法能够读取样式表中指定元素的属性值。
css()方法可以使用键/值对形式访问属性,其语法为:$(selector).css({property:value..})。
读取css属性的值:$(selector).css('property');如果有多个属性要获取,可以使用数组形式:$(selector).css(['property1','property2'])。
总的来说,jQuery中常用的获取属性的方法有:attr()方法、prop方法和css方法。
使用这三种方法,我们可以很方便地读取html属性值并且进行后续的操作,有效地提升我们的网站功能和可用性。
但这三种方法又各有特别之处,在使用时我们要慎重,分清使用哪一种方法,才能更好地发挥它们的作用。
JQuery绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
JQuery绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参<script src="jquery.min.js" type="text/javascript"></script><script language="javascript" type="text/javascript"> $(document).ready(function(){ $('#mySelect').change(function(){ alert($(this).children('option:selected').val()); var p1=$(this).children('option:selected').val();//这就是selected的值 var p2=$('#param2').val();//获取本页⾯其他标签的值 window.location.href="xx.php?param1="+p1+"m2="+p2+"";//页⾯跳转并传参 })})</script><select id="mySelect"> <option value="1">one</option> <option value="2" selected="selected">two</option> <option value="3">three</option></select><input type="text" value="ooo" name="param2" id="param2"/>jquery获取select选择的⽂本与值获取select 选中的 text :$("#ddlregtype").find("option:selected").text();获取select选中的 value:$("#ddlregtype ").val();获取select选中的索引:$("#ddlregtype ").get(0).selectedindex;1、获取选中select的value和text,html代码如下:<select id="mySelect"><option value="1">one</option><option value="2">two</option><option value="3">three</option></select>1、则可通过以下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、修改选中选项optionvar 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
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 获取当前元素和获取下个元素的方法-概述说明以及解释
jq 获取当前元素和获取下个元素的方法-概述说明以及解释1.引言1.1 概述概述部分将引入本文的主题,即介绍jq获取当前元素和获取下个元素的方法。
jq是一款流行的JavaScript库,它简化了操作HTML元素和处理数据的过程,使得开发者能够更轻松地操作和处理DOM元素。
在网页开发中,我们经常需要根据用户的操作或者特定的需求获取当前元素或下一个元素,以便进行相应的处理或操作。
jq提供了一系列的方法,可以方便地获取当前元素和获取下一个元素,极大地简化了我们在开发过程中的工作量。
本文将介绍jq获取当前元素的方法和获取下一个元素的方法,并给出一些实际的示例和应用场景。
通过本文的学习,读者将对jq的这些方法有更深入的了解,能够更加灵活和高效地处理和操作HTML元素。
通过本文的学习,读者将了解到:- jq是什么,以及为什么使用jq来操作HTML元素和处理数据- jq获取当前元素的方法,包括基本的选择器方法和遍历方法- jq获取下一个元素的方法,包括基于兄弟关系和位置的方法- 实际应用场景和示例,帮助读者更好地理解和掌握这些方法- 总结和结论,对本文的内容进行回顾和总结在接下来的章节中,我们将详细介绍jq获取当前元素和获取下一个元素的方法。
首先,我们将从基本的选择器方法和遍历方法开始,了解如何获取当前元素。
然后,我们将介绍获取下一个元素的方法,包括基于兄弟关系和位置的方法。
最后,我们将给出一些实际的示例和应用场景,帮助读者更好地理解和应用这些方法。
让我们开始吧!1.2 文章结构文章主要分为三个部分:引言、正文和结论。
引言部分介绍了本文的概要、结构和目的。
主要是为读者提供一个全面的了解,使读者对本文的内容和目标有一个清晰的认知。
正文部分是本文的核心,主要讲述了两个方面的内容,分别是jq 获取当前元素的方法和jq 获取下一个元素的方法。
在这部分中,将详细介绍这两个方法的具体使用,包括语法、参数、示例等。
同时,会通过实际案例和解析来说明这些方法的实际应用场景和使用技巧,以便读者能够更好地理解和掌握这些方法。
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取值赋值与设置选中实例就是⼩编分享给⼤家的全部内容了,希望能给⼤家⼀个参考,也希望⼤家多多⽀持。
jQuery选择器querySelector的使用指南
jQuery选择器querySelector的使⽤指南简介HTML5向Web API新引⼊了document.querySelector以及document.querySelectorAll两个⽅法⽤来更⽅便地从DOM选取元素,功能类似于jQuery的选择器。
这使得在编写原⽣JavaScript代码时⽅便了许多。
⽤法两个⽅法使⽤差不多的语法,都是接收⼀个字符串参数,这个参数需要是合法的CSS选择语法。
复制代码代码如下:element = document.querySelector('selectors');elementList = document.querySelectorAll('selectors');其中参数selectors 可以包含多个CSS选择器,⽤逗号隔开。
复制代码代码如下:element = document.querySelector('selector1,selector2,...');elementList = document.querySelectorAll('selector1,selector2,...');使⽤这两个⽅法⽆法查找带伪类状态的元素,⽐如querySelector(':hover')不会得到预期结果。
querySelector复制代码代码如下:element = document.querySelector('div#container');//返回id为container的⾸个divelement = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的⾸个元素querySelectorAll该⽅法返回所有满⾜条件的元素,结果是个nodeList集合。
查找规则与前⾯所述⼀样。
elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div需要注意的是返回的nodeList集合中的元素是⾮实时的.。
jquery设置select选中的文本
jquery设置select选中的⽂本<select id="prov"><option value="1">北京市</option><option value="2">上海市</option><option value="3">天津市</option></select>⽤jquery设置上⾯select选中的⽂本//第⼀种⽅式var count = $("#prov option").length;for (var i = 0; i < count; i++) {if ($("#prov ").get(0).options[i].text == "北京市") {$("#prov ").get(0).options[i].selected = true;break;}}//第⼆种⽅式$("#prov").get(0).value = "1";//第三种⽅式$("#prov").val("1");//第四种⽅式$("#prov").find("option[text='北京市']").attr("selected", "selected");因为text并不是⼀个实在的属性,也就是说option的标签中没有 text = "",所以第四种⽅式,在没有⾃定义text=""之前,是⽆效的。
如下定义:<option value="1" text="北京市">北京市</option>这样写了以后,第四种⽅式才⽣效⽤jQuery获取上⾯选中的⽂本$("#prov").find("option:selected").text();//获取到⽂本$("#prov").val(); //获取到value。
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();//清空下拉框。
关于selectinput(选中,取值,赋值等)--------方便自己查阅
关于selectinput(选中,取值,赋值等)--------⽅便⾃⼰查阅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 http://www.k68jquery 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 元素;可以看出有@开头的就表⽰后⾯跟的是属性。
JavaScript或jQuery获取optionvalue值方法解析
JavaScript或jQuery获取optionvalue值⽅法解析1.html<div class="form-group"><label>保险公司</label><select class="form-control" id="testSelect"><option value="平安">平安保险</option><option value="太平洋">太平洋保险</option><option value="平安">平安保险</option></select></div>2.⽤JavaScript获取option 的值以及⽂本内容/*JavaScript实现*/var testSelect = document.getElementById("testSelect");testSelect.onchange = function() { //当选项改变时触发var valOption = this.options[this.selectedIndex].value; //获取option的valuealert(valOption);var txtOption = this.options[this.selectedIndex].innerHTML; //获取option中间的⽂本alert(txtOption);}实现效果:达到了我们想要的效果3.⽤jQuery获取option 的值以及⽂本内容(要引⼊jQuery库)/*⽤jQuery实现*/var oSelect = $("#testSelect");oSelect.on('change',function(){var checkText=$("#testSelect").find("option:selected").text(); //获取Select选择的Textvar checkValue=$("#testSelect").val();console.log(checkText +"~~~~"+ checkValue);});运⾏效果:当我任意选择⼀个option选项的时候触发了change⽅法4.全部代码:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" /><script type="text/javascript" src="js/bootstrap.min.js"></script><style type="text/css">div{width: 400px;margin: 100px;}</style></head><body><div class="form-group"><label>保险公司</label><select class="form-control" id="testSelect"><option value="平安">平安保险</option><option value="太平洋">太平洋保险</option><option value="平安">平安保险</option></select></div><script type="text/javascript">/*JavaScript实现*/var testSelect = document.getElementById("testSelect");testSelect.onchange = function() { //当选项改变时触发var valOption = this.options[this.selectedIndex].value; //获取option的valuealert(valOption);var txtOption = this.options[this.selectedIndex].innerHTML; //获取option中间的⽂本alert(txtOption);}/*⽤jQuery实现*/var oSelect = $("#testSelect");oSelect.on('change',function(){var checkText=$("#testSelect").find("option:selected").text(); //获取Select选择的Textvar checkValue=$("#testSelect").val();console.log(checkText +"~~~~"+ checkValue);});</script></body></html>附:关于select + option 的相关知识点1、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最⼤的索引值2、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的项选中3、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以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
JS获取select标签的选中值和清空select值的操作
$("#testSelect").get(0).selectedIndex;//索引 1 2 3 4 5 6 第二种方式 $("#tesetSelect").find("option:selected").text();//选中的文本
本文为csdn博主johnieli的原创文章遵循cc40bysa版权协议转载请附上原文出处链接及本声明
JS获取 select标签的选中值和清空 select值的操作
一、 js获取select标签选中的值 var obj = document.getElementById(”testSelect”); //定位id
$("#tesetSelect").find("option:selected").val();//选中的值
$("#testSelect").get(0).selectedIndex;//索引 1 2 3 4 5 6 二、 js清空select标签中的值 <select id="area"> <option>11</option> <option>22</option> <option>33</option> </select> 1 2 3 4 5 <script> var area= document.getElementById("area"); area.innerHTML = "";
var index = obj.selectedIndex; // 选中索引
点击select下拉框获取option的属性值
点击select下拉框获取option的属性值select下拉框作为前端开发者应该是经常使⽤的,最近在项⽬中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加⼀个点击事件不就⾏了,然后就加了⼀下,结果⼀运⾏悲催了,怎么点击option事件就是不会执⾏。
这是为什么呢,刚开始也不懂,之前没遇到过这样的需求,后来经过学习,才恍然⼤悟,原来select option没有点击事件,要想获得所选option的属性值,需要通过jquery的change()⽅法来获取,下⾯通过代码解释⼀下,代码如下:<!DOCTYPE html><html><head><meta charset="UTF-8"><!-- 告诉IE使⽤最新的引擎渲染⽹页 --><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对象,取到对象之后就可以取相应的属性值了。
select2的用法
select2的用法【最新版】目录1.Select2 简介2.Select2 的安装与配置3.Select2 的基本使用方法4.Select2 的样式定制5.Select2 的插件与扩展6.Select2 的常见问题与解决方案正文【Select2 简介】Select2 是一个基于 jQuery 的开源选择器库,为用户提供了一个可定制的、功能丰富的下拉选择器。
Select2 不仅可以替换传统的<select>元素,还可以为网页开发者提供更多的样式和功能控制。
【Select2 的安装与配置】要使用 Select2,首先需要引入 jQuery 和 Select2 的 CSS、JavaScript 文件。
可以通过 CDN 或者下载到本地项目中。
在 HTML 文件中,创建一个<select>元素,为其添加一个类名(例如:select2),并设置一个 id。
然后,在 JavaScript 文件中,对 Select2 进行初始化配置。
【Select2 的基本使用方法】1.获取或设置选中的值:使用`$("#select2_id").val()`方法获取选中的值,使用`$("#select2_id").val("新值")`方法设置新的选中值。
2.获取或设置提示文本:使用`$("#select2_id").data("select2").placeholder`方法获取提示文本,使用`$("#select2_id").data("select2").placeholder("新提示文本")`方法设置新的提示文本。
3.禁用或启用选择器:使用`$("#select2_id").prop("disabled", true)`方法禁用选择器,使用`$("#select2_id").prop("disabled", false)`方法启用选择器。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
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(下拉项)
6. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
三级分类 <select name="thirdLevel" id="thirdLevel"
onchange="getFourthLevel()">
})
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
})
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
<option value="0" id="thirdOption">
请选择三级分类
</option>
</select>
</div>
四级分类:
<select name="fourthLevelId" id="fourthLevelId">
<option value="0" id="fourthOption">
请选择四级分类
</option>
</select>
</div>
.if($("#thirdLevel").val()!=0){
$("#thirdLevel option[value!=0]").remove();
}
if($("#fourthLevelId").val()!=0){
设置select:
设置select 选中的索引:
$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值
设置select 选中的value:
$("#ddlRegType ").attr("value","Normal“);
3. var checkValue=$("#select_id").val(); //获取Select选择的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
$("#select_id option[value='3']").remove(); //删除值为3的Option
$("#select_id option[text='4']").remove(); //删除TEXT值为4的Option
清空 Select:
$("#ddlRegType ").empty();
$(this).attr("checked",'true');
}
})
})
$("#btn5").click(function(){//输出选中的值
var str="";
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+"\r\n";
$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option
$("#select_id option:last").remove(); //删除索引值最大的Option
$("#select_id option[index='0']").remove();//删除索引值为0的Option
$("#ddlRegType ").val("Normal");
$("#ddlRegType ").get(0).value = value;
设置select 选中的text:
var count=$("#ddlRegType option").length;
$("#ddlRegType").find("option:selected").text();
获取select选中的 value:
$("#ddlRegType ").val();
获取select选中的索引:
$("#ddlRegType ").get(0).selectedIndex;
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
$("!=0]").remove();
}//这个表示:假如我们希望当选择选择第三类时:如果第四类中有数据则删除,如果没有数据第四类的商品中的为默认值。在后面学习了AJAX技术后经常会使用到!
获取Select :
获取select 选中的 text :
jQuery获取Select元素,并选择的Text和Value:
1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
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
//alert($(this).val());
})
alert(str);
})
})
})
$("#btn4").click(function(){
$("[name='checkbox']").each(function(){//反选