[jQuery]使用jQuery對 select 的操作

使用jQueryselect的操作方式有很多種,在此列出我個人常用的方式
1. 取得選擇項目的文字與值
/*—– 單選 —–*/
//  取得被選擇項目的文字
$(“#select”).find(“:selected”).text();
//  取得被選擇項目的值
$(“#select”).find(“:selected”).val();
/*—– 多選 —–*/
//  使用迴圈取得所有被選擇的項目
$(“#select”).find(“:selected”).each(function() {
    alert(this.text);    //  文字
    alert(this.value);   // 
});
2. 增加項目
$(“#select”).append($(“<option></option>”).attr(“value”, ““).text(“文字“));

$(“#select”).append(‘<option value=”‘++'”>’+文字+'</option>’);

3. 移除選擇的項目
//  移除選擇的項目
$(“#select”).find(“:selected”).remove();
//  移除全部的項目
$(“#select option”).remove();
4. 移除選擇項目後,防止捲軸移到最上面
//  先取得要移除項目的 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;
    }

}

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包:

38ieWXhURt27br9XrDoCeo4eruzKyi8QKs



ann71727

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料