jquery操作select下拉框的多种方法(选中,取值,赋值等)
Query获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发2. var checkText=$("#select_id").find("option:selected").text(); //获取Select 选择的Text3. var checkValue=$("#select_id").val(); //获取Select选择的Value4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值jQuery设置Select选择的 Text和Value:语法解释:1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select 的Text值为jQuery的项选中jQuery添加/删除Select的Option项:语法解释:1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Optionjquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[@name=items]').get(1).checked = true;获取值:文本框,文本区域:$("#txt").attr("value");多选框 checkbox:$("#checkbox_id").attr("value");单选组radio: $("input[@type=radio][@checked]").val();下拉框select: $('#sel').val();控制表单元素:文本框,文本区域:$("#txt").attr("value",'');//清空内容$("#txt").attr("value",'11');//填充内容多选框checkbox: $("#chk1").attr("checked",'');//不打勾$("#chk2").attr("checked",true);//打勾if($("#chk1").attr('checked')==undefined) //判断是否已经打勾单选组 radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项下拉框 select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option$("#sel").empty();//清空下拉框----------------------------------------------------------------------------------------------------//遍历option和添加、移除optionfunction changeShipMethod(shipping){var len = $("select[@name=ISHIPTYPE] option").lengthif(shipping.value != "CA"){$("select[@name=ISHIPTYPE] option").each(function(){if($(this).val() == 111){$(this).remove();}});}else{$("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));}}//取得下拉選單的選取值$(#testSelect option:selected').text();或$("#testSelect").find('option:selected').text();或$("#testSelect").val();//////////////////////////////////////////////////////////////////记性不好的可以收藏下:1,下拉框:var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值$("#select").empty();//清空下拉框 //$("#select").html('');$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option稍微解释一下:1.select[@name='country'] option[@selected] 表示具有name 属性,并且该属性值为'country' 的select元素里面的具有selected 属性的option 元素;可以看出有@开头的就表示后面跟的是属性。
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& gt;").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><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option$("#sel").empty();// 清空下拉框转载太多次,原作者已不可考,感谢原作者的贡献,以及k686绿色软件(/)的供稿。
多选下拉框jquery.multiple.select的使用
多选下拉框jquery.multiple.select的使⽤介绍:多选下拉选择插件是jQuery插件选择复选框,多元素的。
有单选、多选还有其他分组多选、过滤条件选择等等。
相关API及demo:/p/multiple-select/docs/#multiple-select以下是项⽬中曾⽤的demo:1.⾸先引⽤jquery.multiple.select.js、multiple-select.css2.在页⾯select下拉列表⾥⾯加⼀个multiple="multiple"<select name="nimbusHost" id="nimbusHost" multiple="multiple"><c:forEach items="${stormIps}" var="item"><option value="${item.value}">${item.code}</option></c:forEach></select>3.在页⾯初始化的时候,要在js⾥⾯加⼀段代码:<%--这个是默认选中的--%>var numbusIps='${queryStormBaseConfInfo.nimbusHost}';$('#nimbusHost').multipleSelect({width: '300px',single:true//单选,去掉single就是多选}).multipleSelect('setSelects',[numbusIps]);<%--这个是默认不选中的--%>var numbusIps='${queryStormBaseConfInfo.nimbusHost}';$('#nimbusHost').multipleSelect({width: '300px',single:true//单选,去掉single就是多选});4.提交的时候直接⽤var nimbusHost=$("#nimbusHost").val();就可以得到多选下拉框选中的值。
jquery中select用法
jquery中select用法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
很多朋友对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 元素;可以看出有@开头的就表示后面跟的是属性。
select下拉框插件jquery.editable-select详解
select下拉框插件jquery.editable-select详解项⽬中有个需求,下拉框既可以下拉选择,也可以⼿动填写html代码<span>数据来源</span><select class="source"><option value="0">⼈⼯导⼊</option><option value="1">数据服务平台</option></select>js代码$('#noMean').editableSelect({filter:false,effects: 'fade',duration: 200,onCreate:function () {console.log("下拉框创建")},onShow:function () {console.log("下拉框显⽰")},onHide:function () {console.log("下拉框隐藏")},onSelect:function () {console.log("下拉框选项被选中")}}获取值$(".noMean").val()⽤了这个插件以后,这块是⼀个input,type="text"参数filter 选择option以后,是否过滤默认 trueeffects 点击的时候,下拉框的过渡效果有default,slide,fade三个值,默认是defaultduration 过渡效果时间默认是fast 值可以是fast和slow,也可以是数字appendTo 下拉框如果弹出框效果,这个值才会⽤到,显⽰把它加载到哪⾥trigger 下拉框列表如何触发值是"focus", "manual" 默认是focus⽅法onCreate:当editableSelect⽅法⽣效时触发。
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下拉框,包括选中、取值、赋值等。
下面将详细介绍这些方法。
1.选中选项- 使用`val(`方法选中选项:可以使用`val(`方法来选中下拉框中的选项。
例如,`$("#selectId").val("optionValue")`会选中值为"optionValue"的选项。
- 使用`prop(`方法选中选项:也可以使用`prop(`方法来选中选项。
例如,`$("#selectIdoption[value='optionValue']").prop("selected", true)`会选中值为"optionValue"的选项。
2.取得选中的值- 使用`val(`方法获取选中值:可以使用`val(`方法来获取下拉框中选中的值。
例如,`$("#selectId").val(`会返回选中的值。
- 使用`text(`方法获取选中文本:可以使用`text(`方法来获取下拉框中选中的文本。
例如,`$("#selectId option:selected").text(`会返回选中的文本。
3.赋值给选项- 使用`append(`方法添加选项:可以使用`append(`方法向下拉框中添加新的选项。
例如,`$("#selectId").append("<optionvalue='newValue'>New Option</option>")`会添加一个新的选项。
- 使用`html(`方法替换选项:可以使用`html(`方法来替换下拉框中的选项。
例如,`$("#selectId").html("<option value='newValue'>New Option</option>")`会替换所有选项。
jQuery select操作控制方法小结
//指定项选中
$('#test option:first').remove();
//指定值被删除
$('#test option').each(function(){
if( $(this).val() == '5'){
$("#slc1 option[text='jQuery']").attr("selected", true);
PS:特别要注意一下第三项的使用哦。看看JQuery的选择器功能是如此地强大呀!
添加删除option项
为select追加一个Option(下拉项)
$("#slc2").append("<option value='"+i+"'>"+i+"</option>");
jQuery select操作控制方法小结
//获取第一个option的值
$('#test option:first').val();
//最后一个option的值
$('#test option:last').val();
//获取第二个option的值
$('#test option:eq(1)').val();
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
jQuery 取值、赋值的基本方法
/*获得TEXT.AREATEXT的值*/var textval = $("#text_id").attr("value");//或者var textval = $("#text_id").val();/*获取单选按钮的值*/var valradio = $("input[@type=radio][@checked]").val();/*获取一组名为(items)的radio被选中项的值*/var item = $('input[@name=items][@checked]').val();/*获取复选框的值*/var checkboxval = $("#checkbox_id").attr("value");/*获取下拉列表的值*/var selectval = $('#select_id').val();//文本框,文本区域:$("#text_id").attr("value",'');//清空内容$("#text_id").attr("value",'test');//填充内容//多选框checkbox:$("#chk_id").attr("checked",'');//使其未勾选$("#chk_id").attr("checked",true);//勾选if($("#chk_id").attr('checked')==true) //判断是否已经选中//单选组radio:$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项//下拉框select:$("#select_id").attr("value",'test');//设置value=test的项目为当前选中项$("<option value='test'>test</option><optionvalue='test2'>test2</option>").appendTo("#select_id")//添加下拉框的option$("#select_id").empty();//清空下拉框获取一组名为(items)的radio被选中项的值var item = $('input[@name=items][@checked]').val();//若未被选中则val() = undefined 获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[@name=items]').get(1).checked = true;//重置表单$("form").each(function(){.reset();});1. 选取元素$(”#myid”)效果等于document.getElementById(”myid”), 但是写的字符要少好多啊.如果需要将jQuery对象转换成html元素, 则只需要取其第0个元素即可. 例如$(”#myid”)返回的是jQuery对象, 而$(”#myid”)[0]返回的就是html元素如果选择所有的img元素, 那么这么写: $(”img”)如果选择带有class=”TextBox”的div元素(<div class=”TextBox”></div>), 那么这么写: $(”div.TextBox”)选择带有myattr属性的元素$(”div[myattr]”)选择带有myattr属性, 并且属性值等于myclass的元素$(”div[myattr=’myclass’]”)属性不等于[myattr!=’myclass’]属性以my开头[myattr^=’my’]属性以class结尾[myattr$=’class’]属性包含cla这三个字符[myattr*=’cla’]如果一个选择会返回多个元素, 并且希望每返回一个元素, 就把某些属性应用到该元素上, 可以这么写$(”div”).each(function(){$(this).css(”background-color”, “#F00″);alert($(this).html());$(this).width(”200px”);});2.事件给页面加onload事件处理方法$(function(){alert(”页面结构加载完毕, 但是可能某些图片尚未加载(一般情况下, 此事件就够用了)”);});可以给页面绑定多个onload事件处理方法$(function(){alert(”我首先被执行”);});$(function(){a lert(”我第二被执行”);});绑定特殊事件$(”#myid”).keydown(function(){alert(”触发了keydown事件”);});除了这些常用的, 不常用的事件需要通过bind方法绑定3. 元素属性/方法得到一个元素的高度, $(”#myid”).height()得到一个元素的位置, $(”#myid”).offset() 返回的是一个offset对象, 如果取元素位置的top, 则$(”#myid”).offset().top,?取left则$(”#myid”).offset().left得到一个元素的innerHTML, $(”#myid”).html()得到一个元素的innerText, $(”#myid”).text()得到一个文本框的值, $(”#myid”).val()得到一个元素的属性, $(”#myid”).attr(”myattribute”)以上这些方法有个基本特征, 就是不带参数表示取值, 带有参数表示设定值(除了offset), 例如$(”#myid”).height(”20″);$(”#myid”).html(”<a href=”>asdasd</a>”)$(”#myid”).val(”asdasd”)需要注意, offset是只读的.给一个元素设置属性$(”#myid”).attr(”width”, “20%”)读取一个属性$(”#myid”).attr(”width”)一次指定多个属性$(”#myid”).attr({disabled: “disabled”, width:”20%”, height: “30″})删除属性$(”#myid”).removeAttr(”disabled”)应用样式$(”#myid”).addClass(”myclass”)删除样式$(”#myid”).removeClass(”myclass”)加一个样式$(”#myid”).css(”height”, “20px”)加一组样式$(”#myid”).css({height:”20px”, width:”100px”})需要注意的是: 如果是加一个样式, 这个样式的名字是css中的名字, 比如说style=”background-color:#FF0000″, 对应的jQuery写法是$(”#myid”).css(”background-color”, “#FF0000″)但是加一组样式的时候, 样式的名字就是javascript中的css名字了, 比如:myid.style.backgroundColor = “#FF0000″, 对应的jQuery写法是$(”#myid”).css({backgroundColor:”#FF0000″})4. 根据关系查找元素找和自己同级的下一个元素$(”#myid”).next()找和自己同级的所有位于自己之下的元素$(”#myid”).nextAll()找和自己同级的上一个元素$(”#myid”).prev()找和自己同级的所有位于自己之上的所有元素$(”#myid”).prevAll()找自己的第一代子元素$(”#myid”).children()找自己的第一个父元素$(”#myid”).parent()找自己的所有父元素$(”#myid”).parents()例子:$(”div.l4″).parents().each(function() {alert($(this).html());});会把class=l4的div的所有父元素都得到, 并且alert出他们的html例子:$(”div.l4″).parents(”div.l2″).each(function() { alert($(this).html()); });会得到class=l4的父元素, 该父元素必须是div, 而且其class=l2这里说的所有方法, 都可以带表达式, 表达式的写法参考第一部分5. 维护元素在body中增加一个元素$(”body”).append(”<input type=’text’ value=’asd’ />”)该语句会把这段html插入到body结束标签之前, 结果是<input type=’text’ value=’asd’ /></body>$(”body”).prepend(”<input type=’text’ value=’asd’ />”)该语句会把这段html插入到body开始标签之后, 结果是<body><input type=’text’ value=’asd’ />6.AJAX用get方法请求一个页面$.get(””,“q=jquery”, function(data, status){alert(data)})表示请求, 参数是q, 参数的值是jquery, 请求结束后(不管成功还是失败)执行后面的function, 该function有两个固定参数, data和status, data是返回的数据, status是本次请求的状态用post方法请求一个页面$.post(……..) 参数同get方法7.其他方法$.trim(str) 将str前后空格去掉$.browser 返回当前用户浏览器的类型$.browser.version返回当前浏览器的版本8. 插件jQuery支持插件, /plugins/上面有很多现成的插件, 也可以自己写自己写插件, 请参考/Core/jQ.....end#object和/Core/jQuery.extend#object1,下拉框: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用法
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操作单选按钮,复选框,下拉款的操作
本文由我司收集整编,推荐下载,如有疑问,请与我司联系JQuery 操作单选按钮,复选框,下拉款的操作2013/06/23 0 JQuery 中对option 的添加、删除、取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 的Option 项:1.$( #select_id ).append( optionvalue=‘Value’Text /option //为Select 追加一个Option(下拉项)2.$( #select_id ).prepend( optionvalue=‘0’请选择/option //为Select 插入一个Option(第一个位置)3.$( #select_idoption:last ).remove();//删除Select 中索引最大Option(最后一个)4.$( #select_idoption[index=‘0’] ).remove();//删除Select 中索引为0 的Option(第一个)5.$( #select_idoption[value=‘3’] ).remove();//删除Select 中Value=‘3’的Option5.$( #select_idoption[text=‘4’] ).remove();//删除Select 中Text=‘4’的Option内容清空:$( #charCity ).empty();%@ page language= java import= java.util.* pageEncoding= utf-8 % % String path = request.getContextPath(); String basePath = request.getScheme() + ://+request.getServerName() + : + request.getServerPort() + path + / % !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html head base href=。
