当前位置：文档之家 › jQuery获取Select选择的Text和Value

jQuery获取Select选择的Text和Value

  • 格式：doc
  • 大小：81.05 KB
  • 文档页数：7

1.jQuery获取Select选择的Text和Value:2.语法解释：3. 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发4. 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text5. 3. var checkValue=$("#select_id").val(); //获取Select选择的Value6. 4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值7. 5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值8.jQuery设置Select选择的 Text和Value:9.语法解释：10.1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中11.2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中12.3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中13.jQuery添加/删除Select的Option项：14.语法解释：15.1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)16.2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)17.3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)18.4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)19.5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option20.5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option21.jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关22.获取一组radio被选中项的值23.var item = $('input[@name=items][@checked]').val();24.获取select被选中项的文本25.var item = $("select[@name=items] option[@selected]").text();26.select下拉框的第二个元素为当前选中值27.$('#select_id')[0].selectedIndex = 1;28.radio单选组的第二个元素为当前选中值29.$('input[@name=items]').get(1).checked = true;30.31.获取值：32.33.文本框，文本区域：$("#txt").attr("value")；34.多选框 checkbox：$("#checkbox_id").attr("value")；35.单选组radio： $("input[@type=radio][@checked]").val();36.下拉框select： $('#sel').val();37.38.控制表单元素：39.文本框，文本区域：$("#txt").attr("value",'');//清空内容40.$("#txt").attr("value",'11');// 填充内容41.42.多选框checkbox： $("#chk1").attr("checked",'');//不打勾43.$("#chk2").attr("checked",true);// 打勾44.if($("#chk1").attr('checked')==undefined) //判断是否已经打勾45.46.单选组 radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项47.下拉框 select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项48.$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option49.$("#sel").empty()；// 清空下拉框50.51.----------------------------------------------------------------------------------------------------52.53.54.55.//遍历option和添加、移除option56.function changeShipMethod(shipping){57.var len = $("select[@name=ISHIPTYPE] option").length58.if(shipping.value != "CA"){59.$("select[@name=ISHIPTYPE] option").each(function(){60.if($(this).val() == 111){61.$(this).remove();62.}63.});64.}else{65.$("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));66.}67.}68.69.70.//取得下拉選單的選取值71.72.$(#testSelect option:selected').text();73.或$("#testSelect").find('option:selected').text();74.或$("#testSelect").val();75.1,下拉框:76.77.var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)78.var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值79.var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值80.$("#select").empty();//清空下拉框 //$("#select").html('');81.$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option82.83.稍微解释一下:84.1.select[@name='country'] option[@selected] 表示具有name 属性，85.并且该属性值为'country' 的select元素里面的具有selected 属性的option 元素；86.可以看出有@开头的就表示后面跟的是属性。

87.88.2,单选框:89.$("input[@type=radio][@checked]").val(); //得到单选框的选中项的值(注意中间没有空格)90.$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)91.92.3,复选框:93.$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值94.$("input[@type=checkbox][@checked]").each(function() { //由于复选框一般选中的是多个,所以可以循环输出95.alert($(this).val());96.});97.98.$("#chk1").attr("checked",'');//不打勾99.$("#chk2").attr("checked",true);// 打勾100.if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾101.102.103.当然jquery的选择器是强大的. 还有很多方法.104.105.<script src="jquery-1.2.1.js" type="text/javascript"></scr ipt>106.<script language="javascript" type="text/javascript"> 107.$(document).ready(function(){108.$("#selectTest").change(function()109.{110.//alert("Hello");111.//alert($("#selectTest").attr("name"));112.//$("a").attr("href","xx.html");113.//window.location.href="xx.html";114.//alert($("#selectTest").val());115.alert($("#selectTest option[@selected]").text());116.$("#selectTest").attr("value", "2");117.118.});119.});120.</script>121.122.123.<a href="#">aaass</a>124.125.<!--下拉框-->126.<select id="selectTest" name="selectTest">127.<option value="1">11</option>128.<option value="2">22</option>129.<option value="3">33</option>130.<option value="4">44</option>131.<option value="5">55</option>132.<option value="6">66</option>133.</select>134.jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项的值135.var item = $('input[@name=items][@checked]').val(); 136.获取select被选中项的文本137.var item = $("select[@name=items] option[@selected]").text ();138.select 下拉框的第二个元素为当前选中值139.$('#select_id')[0].selectedIndex = 1;140.radio单选组的第二个元素为当前选中值141.$('input[@name=items]').get(1).checked = true;142.获取值：143.文本框，文本区域：$("#txt").attr("value")；144.多选框 checkbox：$("#checkbox_id").attr("value")；145.单选组radio： $("input[@type=radio][@checked]").val(); 146.下拉框select： $('#sel').val();147.控制表单元素：148.文本框，文本区域：$("#txt").attr("value",'');//清空内容149.$("#txt").attr("value",'11');// 填充内容150.多选框checkbox： $("#chk1").attr("checked",'');//不打勾151.$("#chk2").attr("checked",true);// 打勾152.if($("#chk1").attr('checked')==undefined) //判断是否已经打勾153.单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项154.下拉框 select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项155.$("<optionvalue='1'& gt;1111</option><optionvalue='2'>2222 </option& gt;").appendTo("#sel")//添加下拉框的option156.$("#sel").empty()；// 清空下拉框157.158.获取一组radio被选中项的值159.var item = $('input[@name=items][@checked]').val(); 160.获取select被选中项的文本161.var item = $("select[@name=items] option[@selected]").text ();162.select下拉框的第二个元素为当前选中值163.$('#select_id')[0].selectedIndex = 1;164.radio单选组的第二个元素为当前选中值165.$('input[@name=items]').get(1).checked = true;166.获取值：167.文本框，文本区域：$("#txt").attr("value")；168.多选框 checkbox：$("#checkbox_id").attr("value")；169.单选组radio： $("input[@type=radio][@checked]").val();170.下拉框select： $('#sel').val();171.控制表单元素：172.文本框，文本区域：$("#txt").attr("value",'');//清空内容173.$("#txt").attr("value",'11');// 填充内容174.多选框checkbox： $("#chk1").attr("checked",'');//不打勾175.$("#chk2").attr("checked",true);// 打勾176.if($("#chk1").attr('checked')==undefined) //判断是否已经打勾177.单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项178.下拉框 select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项179.$("<option value='1'>1111</option><option value='2'>2222</ option>").appendTo("#sel")//添加下拉框的option 180.$("#sel").empty()；// 清空下拉框query获取数据并生成下拉菜单,记下来,免得又弄丢.这东东一不用就忘,郁闷~!!!<script type="text/javascript">$(document).ready(function() {GetByJquery();$("#ddlProvince").change(function() { GetCity() });$("#ddlCity").change(function() { GetDistrict() });});function GetByJquery() {$("#ddlProvince").empty(); //清空省份SELECT控件$.getJSON("/ajax/GetProvinceList", function(data) {$.each(data, function(i, item) {$("<option></option>").val(item["ProvinceID"]).text(item["ProvinceName"]).appendTo($("#ddlProvince"));});GetCity();});}function GetCity() {$("#ddlCity").empty(); //清空城市SELECT控件var url ="/ajax/GetCityList/" + $("#ddlProvince").val();$.getJSON(url, function(data) {$.each(data, function(i, item) {$("<option></option>").val(item["CityID"]).text(item["CityName"]).appendTo($("#ddlCity"));});GetDistrict();});}function GetDistrict() {$("#ddlDistrict").empty(); //清空市区SELECT控件var url = "/ajax/GetDistrictList/" + $("#ddlCity").val();$.getJSON(url, function(data) {$.each(data, function(i, item) {$("<option></option>").val(item["DistrictID"]).text(item["DistrictName"]).appendTo($("#ddlDistrict"));});});}</script>。

合集下载

jquery获取input文本的值的方法

jquery获取input文本的值的方法

jquery获取input文本的值的方法### jQuery获取Input文本的值的方法在Web开发中，jQuery是一个非常流行的JavaScript库，它简化了诸如选择DOM元素、事件处理和异步请求等任务。

本文将详细介绍如何使用jQuery获取HTML页面中`input`元素文本框的值。

#### 基础知识在HTML中，`input`元素通常用于收集用户信息。

为了获取这些元素的值，你可以使用jQuery的选择器和属性访问方法。

#### 示例代码假设你有以下HTML代码：```html<input type="text" id="myInput" value="默认值">```#### 方法一：使用ID选择器你可以通过ID选择器获取元素的值，如下：```javascriptvar value = $("#myInput").val();console.log(value); // 将会打印出input元素的值```这里，`#myInput`是ID选择器，它选择了ID为`myInput`的元素。

`.val()`是jQuery方法，用于获取或设置元素的值。

#### 方法二：使用类选择器如果`input`元素使用了类而不是ID，你可以这样获取值：```html<input type="text" class="myInputClass" value="默认值">``````javascriptvar value = $(".myInputClass").val();console.log(value); // 打印出值```这里，`.myInputClass`是类选择器。

#### 方法三：使用属性选择器如果存在多个具有相同类的元素，但你想要选择具有特定属性或值的元素，可以使用属性选择器：```javascriptvar value = $("input[type="text"][value="默认值"]").val();console.log(value); // 打印出具有指定类型和值的input元素的值```#### 方法四：在事件触发时获取值通常，你可能希望在用户与页面交互（如点击按钮）时获取`input`的值：```html<button id="getValueButton">获取Input值</button>``````javascript$("#getValueButton").click(function() {var value = $("#myInput").val();console.log(value); // 当按钮被点击时，打印出input的值});```在这个例子中，当用户点击按钮时，`click`事件被触发，进而执行函数内的代码，获取并打印`input`的值。

jquery】常用的jquery获取表单对象的属性与值

jquery】常用的jquery获取表单对象的属性与值

jquery】常⽤的jquery获取表单对象的属性与值1【jquery】常⽤的jquery获取表单对象的属性与值234 1、JQuery的概念56789 JQuery是⼀个JavaScript的类库，这个类库集合了很多功能⽅法，利⽤类库你可以⽤⼀些简单的代码实现⼀些复杂的JS效果。

101112 2、JQuery实现了代码的分离1314不⽤再⽹页中加⼊如：onclick之类的事件来调⽤函数了，直接引⼊JQuery类库和⾃⼰编写的JQuery代码就可以了；15如：16 $(function(){17 $("Element").click{function(){18 alert("点击我哦！");19 }20 }21 })；22上⾯的代码中只要定义了Element 这个元素后⾯的click是动作2324 alert("点击我哦！");这个是要执⾏的代码，当然你可以有很多的操作在这个函数中；25这⾥⾯的$这个号代表JQuery的意思，就是引⽤类库。

2627 3、JQuery的核⼼的⼀些⽅法28 each(callback) '就像循环29 $("Element").length; ‘元素的个数，是个属性30 $("Element").size(); ’也是元素的个数，不过带括号是个⽅法31 $("Element").get(); ‘某个元素在页⾯中的集合，以数组的形式存储32 $("Element").get(index); ’功能和上⾯的相同，index表⽰第⼏个元素，数组的下标33 $("Element").get().reverse(); ‘把得到的数组⽅向34 ("Element1").index(("Element1").index(("Element2")); ’元素2在元素1中的索引值是。

(完整版)jQuery对select和option操作小结

(完整版)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 使用方法

jquery 使用方法

jQuery是目前使用最广泛的javascript函数库。

据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。

微软公司甚至把jQuery作为他们的官方库。

对于网页开发者来说，学会jQuery是必要的。

因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。

这是它区别于其他函数库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。

选择表达式可以是CSS选择器：1 $(document)//选择整个文档对象2 $('#myId')//选择ID为myId的网页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式：1 $('a:first')//选择网页中第一个a元素2 $('tr:odd')//选择表格的奇数行3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素，除了前三个6 $('div:animated')//选择当前处于动画状态的div元素二、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩小结果集：1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有一些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：1 $('div').next('p'); //选择div元素后面的第一个p元素2 $('div').parent(); //选择div元素的父元素3 $('div').closest('form'); //选择离div最近的那个form父元素4 $('div').children(); //选择div的所有子元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中网页元素以后，就可以对它进行某种操作。