js改變下拉框內容

CreateTime--2018年4月8日18:47:38

Author:Marydon

適用場景：通常情況下，級聯菜單、通過ajax異步獲取后台數據改寫下拉框內容會有這種需求

實現方式：通過jQuery實現

HTML片段

編程語言：
        <select id="test">
            <option value="">--請選擇--</option>
            <option value="1">javascript</option>
            <option value="2">jquery</option>
        </select>
        <input type="button" value="點擊改變下拉選項" onclick="changeOptionContent3();"/>

js代碼

/**
 * 方式一：推薦使用
 */
function changeOptionContent() {
    var optionTags = '<option value="3">java</option>'
                    +'<option value="4">oracle</option>';
    // 將下拉框中除了第一個選項，全部移除
    $('#test option:gt(0)').remove();
    // 為下拉框拼接子標簽
    $('#test').append(optionTags);
};
/**
 * 方式二：使用html()
 */
function changeOptionContent2() {
    // 初始化
    var optionTags = '<option value="">--請選擇--</option>';
    // 標簽內容
    optionTags += '<option value="3">java</option>'
                +'<option value="4">oracle</option>';

    // 重寫下拉框的內容
    $('#test').html(optionTags);
};
/**
 * 方式三：使用empty()
 */
function changeOptionContent3() {
    // 1.置空
    $('#test').empty();
    // 2.拼接
    var optionTags = '<option value="">--請選擇--</option>';
    $('#test').append(optionTags);
    optionTags = '<option value="3">java</option>'
                +'<option value="4">oracle</option>';
    $('#test').append(optionTags);                            
};

 

 相關推薦：

　　 類似文章