首页 > Web开发 > 详细

js改变下拉框内容

时间:2018-04-08 19:23:34      阅读:170      评论:0      收藏:0      [点我收藏+]

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

 

 相关推荐:

   类似文章

js改变下拉框内容

原文:https://www.cnblogs.com/Marydon20170307/p/8746721.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!