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

};

相关推荐：

　　 类似文章