js改变下拉框内容

最新推荐文章于 2023-04-12 11:11:45 发布

weixin_33885676

最新推荐文章于 2023-04-12 11:11:45 发布

阅读量2k

点赞数

文章标签： javascript ViewUI

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);                            
};