JQuery 針對 Select的操作

1. 取得選擇項目的文字與值

[mw_shl_code=javascript,true]
/*----- 單選 -----*/
//  取得被選擇項目的文字
$("#select").find(":selected").text();

//  取得被選擇項目的值
$("#select").find(":selected").val();

/*----- 多選 -----*/
//  使用迴圈取得所有被選擇的項目
$("#select").find(":selected").each(function() {
  alert(this.text);    //  文字
  alert(this.value);   //  值
});
[/mw_shl_code]


2. 增加項目
[mw_shl_code=javascript,true]$("#select").append($("<option></option>").attr("value", "值").text("文字"));[/mw_shl_code]


3. 移除選擇的項目
[mw_shl_code=javascript,true]
//  移除選擇的項目
$("#select").find(":selected").remove();

//  移除全部的項目
$("#select option").remove();
[/mw_shl_code]


4. 移除選擇項目後，防止捲軸移到最上面
[mw_shl_code=javascript,true]
//  先取得要移除項目的 index
var selectIndex = $("#select").find(":selected").index();

//  移除選擇的項目
$("#select").find(":selected").remove();

//  判斷移除項目後，原先的index是否還有option，有的話就直接將此option設定為選取狀態
//  捲軸就不會往上跑了
if ($('#select option').get(selectIndex) != null) {
    $('#select option').get(selectIndex).selected = true;
}
else {
    //  沒有項目的話，判斷select理是否還有option
    //  有的話，表示移除的項目為最後一個，就設定上一個option為選取狀態
    if ($('#select option').length > 0) {
        $('#select option').get(selectIndex - 1).selected = true;
    }
}[/mw_shl_code]