房屋裝潢設計新選擇！多年經驗
細膩打造，，價格合理		殺價網搬家優質選！專業服務品質，細心保護物品
精緻包裝服務，提供南北長途搬家

首頁  •  tw 論壇 • 程式設計討論     • 

[JQuery] jQuery對select的操作

房東：阿凱
發表時間：2011-04-10
[檢舉]



  • get


    • 取出選擇的值

      $("select#Club").val();

      $(\'select#Club option:selected\').text();

      以上2方法在單選時相同，但複選時，

      val()會用逗號分開 ex. AA, BB

      text()不會 ex. AABB

    • 取出array

      $("select#Club").children("[@selected]").each(function(){

          alert(this.text());

      });



  • set


    • 使某option變為selected

      $("#select1").children().each(function(){

          if ($(this).text()=="option you want"){

              //jQuery給法

              $(this).attr("selected","true"); //或是給selected也可



              //javascript給法

              this.selected = true;

          }

      });

    • 讓新增的option直接為selected

      var option = jQuery("new option");

      $(\'      select#Club\').append(option);

      $(option).attr("selected","true"); //讓option為selected

      $(\'      select#Club\').trigger("change"); //最後要觸發select的change事件


    • select下拉框的第二個元素為當前選中值

      $(\'select#Club\')[0].selectedIndex = 1;//不知為何要加[0]

      =========== K. T. Chen 提到 ==========================

      在$("")加[0]的意思是把jQuery物件轉為DOM物件。這樣子jQuery物件才能使用DOM底下的selectedIndex方法。



  • event

    //改變時的事件

    $("select#Club").change(function(){ //事件發生

        //一次印出

        alert($(this).val());



        //印出選到多個值

        jQuery(\'option:selected\', this).each(function(){

            alert(this.value);

        });

    });

  • 移除

    removeOption(index/value/regex[, selectedOnly])

    $(\'select#Clubs option:selected\').remove();






//純javascirpt

<select onchange="alert(\'Index: \' + this.selectedIndex

+ \'\\nValue: \' + this.options[this.selectedIndex].value)">

...

</select>



參考






  • 贊助網站       

    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊，房屋、店面熱門精選物件，廣利不動產 優質仲介，房屋租賃、買賣資訊透明，交易真安心！
    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務

    • 1 樓住戶：小凱
    發表時間：2011-04-12     		[檢舉]

    <!DOCTYPE html> 
    <html>     
    <head>     
          <style>     
      img     { padding:10px; }     
      div     { color:red; font-size:24px; }     
    </style>     
          <script src="http://code.jquery.com/jquery-1.5.js"></script>     
    </head>     
    <body>     
       
          <img />     
          <img />     
          <img />     
     
          <div><B>Attribute of Ajax</B></div>     
     
    <script>     
    $    ("img").attr({      
      src    : "/images/hat.gif",     
      title    : "jQuery",     
      alt    : "jQuery Logo"     
    });     
    $    ("div").text($("img").attr("alt"));     
    </script>     
     
    </body>     
    </html>

    Demo:


     


    Example: Disable buttons greater than the 1st button.


    <!DOCTYPE html> 
    <html>     
    <head>     
          <style>     
      button     { margin:10px; }     
    </style>     
          <script src="http://code.jquery.com/jquery-1.5.js"></script>     
    </head>     
    <body>     
       
          <button>0th Button</button>     
          <button>1st Button</button>     
          <button>2nd Button</button>     
     
    <script>     
    $    ("button:gt(1)").attr("disabled","disabled");     
    </script>     
     
    </body>     
    </html>

    Demo:


     



    Example: Set the id for divs based on the position in the page.


    <!DOCTYPE html> 
    <html>     
    <head>     
          <style>     
      div     { color:blue; }     
      span     { color:red; }     
      b     { font-weight:bolder; }     
                </style>     
          <script src="http://code.jquery.com/jquery-1.5.js"></script>     
    </head>     
    <body>     
       
          <div>Zero-th <span></span></div>     
          <div>First <span></span></div>     
          <div>Second <span></span></div>     
     
    <script>     
    $    ("div").attr("id", function (arr) {     
          return "div-id" + arr;     
    })     
    .each(function () {     
      $    ("span", this).html("(ID = '<b>" + this.id + "</b>')");     
    });     
    </script>     
     
    </body>     
    </html>

    Demo:


     



    Example: Set the src attribute from title attribute on the image.


    <!DOCTYPE html> 
    <html>     
    <head>     
          <script src="http://code.jquery.com/jquery-1.5.js"></script>     
    </head>     
    <body>     
       
    <img title="hat.gif"/>     
     
    <script>     
    $    ("img").attr("src", function() {      
            return "/images/" + this.title;      
    });     
    </script>     
     
    </body>     
    </html>

    Demo:


     




    　共 1 人回應　　選擇頁數 【第1 頁】 

    姓名：
    佈告內容：