2011/04/20

jQuery對select tag的操作


  • 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>

沒有留言:

發佈留言