tinguo002

           

          jQuery對(duì)select操作小結(jié)

          轉(zhuǎn)載:

          http://www.cnblogs.com/as285996985/articles/1535014.html

          //遍歷option和添加、移除option
          function 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(); //得到下拉菜單的選中項(xiàng)的文本(注意中間有空格)
          var cc2 = $('.formc select[@name="country"]').val();   //得到下拉菜單的選中項(xiàng)的值
          var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜單的選中項(xiàng)的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();   //得到單選框的選中項(xiàng)的值(注意中間沒有空格)
          $("input[@type=radio][@value=2]").attr("checked",'checked'); //設(shè)置單選框value=2的為選中狀態(tài).(注意中間沒有空格)

          3,復(fù)選框:
          $("input[@type=checkbox][@checked]").val(); //得到復(fù)選框的選中的第一項(xiàng)的值
          $("input[@type=checkbox][@checked]").each(function(){ //由于復(fù)選框一般選中的是多個(gè),所以可以循環(huán)輸出
             alert($(this).val());
             });

          $("#chk1").attr("checked",'');//不打勾
          $("#chk2").attr("checked",true);//打勾
          if($("#chk1").attr('checked')==undefined){} //判斷是否已經(jīng)打勾


          當(dāng)然jquery的選擇器是強(qiáng)大的. 還有很多方法.

          <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選中,及其相關(guān)獲取一組radio被選中項(xiàng)的值
          var item = $('input[@name=items][@checked]').val();
          獲取select被選中項(xiàng)的文本
          var item = $("select[@name=items] option[@selected]").text();
          select下拉框的第二個(gè)元素為當(dāng)前選中值
          $('#select_id')[0].selectedIndex = 1;
          radio單選組的第二個(gè)元素為當(dāng)前選中值
          $('input[@name=items]').get(1).checked = true;
          獲取值:
          文本框,文本區(qū)域:$("#txt").attr("value");
          多選框checkbox:$("#checkbox_id").attr("value");
          單選組radio: $("input[@type=radio][@checked]").val();
          下拉框select: $('#sel').val();
          控制表單元素:
          文本框,文本區(qū)域:$("#txt").attr("value",'');//清空內(nèi)容
                          $("#txt").attr("value",'11');//填充內(nèi)容
          多選框checkbox: $("#chk1").attr("checked",'');//不打勾
                          $("#chk2").attr("checked",true);//打勾
                          if($("#chk1").attr('checked')==undefined) //判斷是否已經(jīng)打勾
          單選組radio: $("input[@type=radio]").attr("checked",'2');//設(shè)置value=2的項(xiàng)目為當(dāng)前選中項(xiàng)
          下拉框select: $("#sel").attr("value",'-sel3');//設(shè)置value=-sel3的項(xiàng)目為當(dāng)前選中項(xiàng)
                      $("<optionvalue='1'>1111</option><optionvalue='2'> 2222</option>").appendTo("#sel")//添加下拉框的option
                      $("#sel").empty();//清空下拉框

          獲取一組radio被選中項(xiàng)的值
          var item = $('input[@name=items][@checked]').val();
          獲取select被選中項(xiàng)的文本
          var item = $("select[@name=items] option[@selected]").text();
          select下拉框的第二個(gè)元素為當(dāng)前選中值
          $('#select_id')[0].selectedIndex = 1;
          radio單選組的第二個(gè)元素為當(dāng)前選中值
          $('input[@name=items]').get(1).checked = true;
          獲取值:
          文本框,文本區(qū)域:$("#txt").attr("value");
          多選框checkbox:$("#checkbox_id").attr("value");
          單選組radio: $("input[@type=radio][@checked]").val();
          下拉框select: $('#sel').val();
          控制表單元素:
          文本框,文本區(qū)域:$("#txt").attr("value",'');//清空內(nèi)容
          $("#txt").attr("value",'11');//填充內(nèi)容
          多選框checkbox: $("#chk1").attr("checked",'');//不打勾
          $("#chk2").attr("checked",true);//打勾
          if($("#chk1").attr('checked')==undefined) //判斷是否已經(jīng)打勾
          單選組radio: $("input[@type=radio]").attr("checked",'2');//設(shè)置value=2的項(xiàng)目為當(dāng)前選中項(xiàng)
          下拉框select: $("#sel").attr("value",'-sel3');//設(shè)置value=-sel3的項(xiàng)目為當(dāng)前選中項(xiàng)
          $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
          $("#sel").empty();//清空下拉框


          =======================================================
          參考:http://blog.csdn.net/nairuohe/article/details/6307367

          每一次操作select的時(shí)候,總是要出來(lái)翻一下資料,不如自己總結(jié)一下,以后就翻這里了。

          比如<select class="selector"></select>

          1、設(shè)置value為pxx的項(xiàng)選中

               $(".selector").val("pxx");

          2、設(shè)置text為pxx的項(xiàng)選中

              $(".selector").find("option[text='pxx']").attr("selected",true);

              這里有一個(gè)中括號(hào)的用法,中括號(hào)里的等號(hào)的前面是屬性名稱,不用加引號(hào)。很多時(shí)候,中括號(hào)的運(yùn)用可以使得邏輯變得很簡(jiǎn)單。

          3、獲取當(dāng)前選中項(xiàng)的value

              $(".selector").val();

          4、獲取當(dāng)前選中項(xiàng)的text

              $(".selector").find("option:selected").text();

              這里用到了冒號(hào),掌握它的用法并舉一反三也會(huì)讓代碼變得簡(jiǎn)潔。

           

          很多時(shí)候用到select的級(jí)聯(lián),即第二個(gè)select的值隨著第一個(gè)select選中的值變化。這在jquery中是非常簡(jiǎn)單的。

          如:$(".selector1").change(function(){

               // 先清空第二個(gè)

                $(".selector2").empty();

               // 實(shí)際的應(yīng)用中,這里的option一般都是用循環(huán)生成多個(gè)了

                var option = $("<option>").val(1).text("pxx");

                $(".selector2").append(option);

          });

           



          歡迎大家訪問(wèn)我的個(gè)人網(wǎng)站 萌萌的IT人

          posted on 2013-03-19 16:52 一堣而安 閱讀(215) 評(píng)論(0)  編輯  收藏 所屬分類: js_css

          導(dǎo)航

          統(tǒng)計(jì)

          常用鏈接

          留言簿(1)

          隨筆分類

          隨筆檔案

          收藏夾

          搜索

          最新評(píng)論

          閱讀排行榜

          評(píng)論排行榜

          主站蜘蛛池模板: 寿阳县| 福州市| 鹤庆县| 宝丰县| 东台市| 石河子市| 广宁县| 松潘县| 浙江省| 宝坻区| 陆川县| 庄浪县| 舒兰市| 凉城县| 浙江省| 肇源县| 威宁| 九龙城区| 吉木萨尔县| 嘉荫县| 日土县| 慈溪市| 凉山| 邓州市| 吉木萨尔县| 嘉禾县| 巢湖市| 合作市| 康平县| 彭州市| 太仆寺旗| 自治县| 奈曼旗| 石阡县| 和田市| 文安县| 穆棱市| 高邮市| 化德县| 铁岭市| 和顺县|