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
    

    //使aaa為selected
    $("#select1").children().each(function(){
        if ($(this).text() == "aaa"){
            //jQuery給法
            $(this).attr("selected","true"); //或是給selected也可
    
            //javascript給法
            this.selected = true;   
        ;}
    });
    
    //直接指定... 上面的方法變的有點蠢... 誰寫的... 我....
    $('#select1').val("aaa");
    
    

  • 新增option
    

    $('select').append(new Option('text', 'value')); //之前好像誤寫成 jQuery("new option"); 歹勢呀~

  • 讓新增的option直接為selected
    

    //new Option([text], [value], [defaultSelected], [selected]
    var option = new Option(
                 'text'
                 , 'value'
                 , true     //html裡顯示selected
                 , true     //第四個參數即為selected
               ); 
    $('select').append(option);
    

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

參考

• http://www.texotela.co.uk/code/jquery/select/
• http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html
• MSDN - onchange Event
• Add a new option to a select with jQuery