勤加练习，必能得心应手！不期速成，日拱一卒 ！
态度决定一切
posts - 167,  comments - 30,  trackbacks - 0
；烂笔头，Jquery select option在html中使用
转载自：
http://conkeyn.iteye.com/blog/734186

总结还不错的

  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选择的Text  
  5. 3. var checkValue=$("#select_id").val();  //获取Select选择的Value  
  6. 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'的Option  
  20. 5. $("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option  
  21.   
  22. http://www.cnblogs.com/SAL2928/archive/2008/10/28/1321285.html  
  23.   
  24. jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关  
  25. 获 取一组radio被选中项的值  
  26. var item = $('input[@name=items][@checked]').val();  
  27. 获 取select被选中项的文本  
  28. var item = $("select[@name=items] option[@selected]").text();  
  29. select下拉框的第二个元素为当前选中值  
  30. $('#select_id')[0].selectedIndex = 1;  
  31. radio单选组的第二个元素为当前选中值  
  32. $('input[@name=items]').get(1).checked = true;  
  33.   
  34. 获取值：  
  35.   
  36. 文本框，文本区域：$("#txt").attr("value")；  
  37. 多选框 checkbox：$("#checkbox_id").attr("value")；  
  38. 单选组radio：   $("input[@type=radio][@checked]").val();  
  39. 下拉框select： $('#sel').val();  
  40.   
  41. 控制表单元素：  
  42. 文本框，文本区域：$("#txt").attr("value",'');//清空内容  
  43. $("#txt").attr("value",'11');// 填充内容  
  44.   
  45. 多选框checkbox： $("#chk1").attr("checked",'');//不打勾  
  46. $("#chk2").attr("checked",true);// 打勾  
  47. if($("#chk1").attr('checked')==undefined) //判断是否已经打勾  
  48.   
  49. 单选组 radio：    $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项  
  50. 下拉框 select：   $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项  
  51. $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option  
  52. $("#sel").empty()；// 清空下拉框  
  53.   
  54. ----------------------------------------------------------------------------------------------------  
  55.   
  56.    
  57.   
  58. //遍历option和添加、移除option  
  59. function changeShipMethod(shipping){  
  60. var len = $("select[@name=ISHIPTYPE] option").length  
  61. if(shipping.value != "CA"){  
  62. $("select[@name=ISHIPTYPE] option").each(function(){  
  63. if($(this).val() == 111){  
  64. $(this).remove();  
  65. }  
  66. });  
  67. }else{  
  68. $("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));  
  69. }  
  70. }  
  71.   
  72.   
  73. //取得下拉選單的選取值  
  74.   
  75. $(#testSelect option:selected').text();  
  76. 或$("#testSelect").find('option:selected').text();  
  77. 或$("#testSelect").val();  
  78. //////////////////////////////////////////////////////////////////  
  79. 记 性不好的可以收藏下：  
  80. 1,下拉框:  
  81.   
  82. var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)  
  83. var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值  
  84. var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值  
  85. $("#select").empty();//清空下拉框 //$("#select").html('');  
  86. $("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option  
  87.   
  88. 稍微解释一下:  
  89. 1.select[@name='country'] option[@selected] 表示具有name 属性，  
  90. 并 且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素；  
  91. 可以看出有@开头的就表示后面跟 的是属性。  
  92.   
  93. 2,单选框:  
  94. $("input[@type=radio][@checked]").val(); //得到单选框的 选中项的值(注意中间没有空格)  
  95. $("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)  
  96.   
  97. 3,复选框:  
  98. $("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值  
  99. $("input[@type=checkbox][@checked]").each(function() { //由于复选框一般选中的是多个,所以可以循环输出  
  100. alert($(this).val());  
  101. });  
  102.   
  103. $("#chk1").attr("checked",'');//不打勾  
  104. $("#chk2").attr("checked",true);// 打勾  
  105. if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾  
  106.   
  107.   
  108. 当然jquery的选择器是强大的. 还有很多方法.  
  109.   
  110. <script src="jquery-1.2.1.js" type="text/javascript"></script>  
  111. <script language="javascript" type="text/javascript">  
  112. $(document).ready(function(){  
  113. $("#selectTest").change(function()  
  114. {  
  115. //alert("Hello");  
  116. //alert($("#selectTest").attr("name"));  
  117. //$("a").attr("href","xx.html");  
  118. //window.location.href="xx.html";  
  119. //alert($("#selectTest").val());  
  120. alert($("#selectTest option[@selected]").text());  
  121. $("#selectTest").attr("value", "2");  
  122.   
  123. });  
  124. });  
  125. </script>  
  126.   
  127.   
  128. <a href="#">aaass</a>  
  129.   
  130. <!--下拉框-->  
  131. <select id="selectTest" name="selectTest">  
  132. <option value="1">11</option>  
  133. <option value="2">22</option>  
  134. <option value="3">33</option>  
  135. <option value="4">44</option>  
  136. <option value="5">55</option>  
  137. <option value="6">66</option>  
  138. </select>  
  139. jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中 项的值  
  140. var item = $('input[@name=items][@checked]').val();  
  141. 获取select被选 中项的文本  
  142. var item = $("select[@name=items] option[@selected]").text();  
  143. select 下拉框的第二个元素为当前选中值  
  144. $('#select_id')[0].selectedIndex = 1;  
  145. radio单选组的第二个 元素为当前选中值  
  146. $('input[@name=items]').get(1).checked = true;  
  147. 获取值：  
  148. 文本 框，文本区域：$("#txt").attr("value")；  
  149. 多选框 checkbox：$("#checkbox_id").attr("value")；  
  150. 单选组radio： $("input[@type=radio][@checked]").val();  
  151. 下拉框select： $('#sel').val();  
  152. 控 制表单元素：  
  153. 文本框，文本区域：$("#txt").attr("value",'');//清空内容  
  154. $("#txt").attr("value",'11');// 填充内容  
  155. 多选框checkbox： $("#chk1").attr("checked",'');//不打勾  
  156. $("#chk2").attr("checked",true);// 打勾  
  157. if($("#chk1").attr('checked')==undefined) //判断是否已经打勾  
  158. 单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项  
  159. 下拉框 select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项  
  160. $("<optionvalue='1'& gt;1111</option><optionvalue='2'>2222</option& gt;").appendTo("#sel")//添加下拉框的option  
  161. $("#sel").empty()；// 清空下拉框  
  162.   
  163. 获取一组radio被选中项的值  
  164. var item = $('input[@name=items][@checked]').val();  
  165. 获取select被选中项的文本  
  166. var item = $("select[@name=items] option[@selected]").text();  
  167. select下拉框的第二个元素为当 前选中值  
  168. $('#select_id')[0].selectedIndex = 1;  
  169. radio单选组的第二个元素为当前选中值  
  170. $('input[@name=items]').get(1).checked = true;  
  171. 获取值：  
  172. 文本框，文本区域：$("#txt").attr("value")；  
  173. 多选框 checkbox：$("#checkbox_id").attr("value")；  
  174. 单选组radio： $("input[@type=radio][@checked]").val();  
  175. 下拉框select： $('#sel').val();  
  176. 控 制表单元素：  
  177. 文本框，文本区域：$("#txt").attr("value",'');//清空内容  
  178. $("#txt").attr("value",'11');// 填充内容  
  179. 多选框checkbox： $("#chk1").attr("checked",'');//不打勾  
  180. $("#chk2").attr("checked",true);// 打勾  
  181. if($("#chk1").attr('checked')==undefined) //判断是否已经打勾  
  182. 单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项  
  183. 下拉框 select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项  
  184. $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option  
  185. $("#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>



posted on 2011-11-28 14:35 David1228 阅读(1620) 评论(0)  编辑  收藏 所属分类: JavaScript 、JQuery

只有注册用户登录后才能发表评论。
网站导航:
 

<2011年11月>
日一二三四五六
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

常用链接

留言簿(4)

随笔分类

随笔档案

文章档案

新闻分类

新闻档案

相册

收藏夹

Java

Linux知识相关

Spring相关

云计算/Linux/虚拟化技术/

友情博客

多线程并发编程

开源技术

持久层技术相关

搜索

  •  

积分与排名

  • 积分 - 354524
  • 排名 - 155

最新评论

阅读排行榜

评论排行榜

Copyright ©2024 David1228 Powered By博客园 模板提供：沪江博客