码迷,mamicode.com
首页 > Web开发 > 详细

js改变下拉框内容

时间:2018-04-08 19:49:39      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:display   code   remove   ack   asc   onclick   AC   初始化   tag   

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改变下拉框内容

标签:display   code   remove   ack   asc   onclick   AC   初始化   tag   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!