js改变下拉框内容 20256311编辑

Heaven helps those who help themselves
资深码农+深耕理财=财富自由
欢迎关注

js改变下拉框内容

Created by Marydon on 2018-04-08 18:52

适用场景:通常情况下,级联菜单、通过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);                            
};
复制代码

 

 相关推荐:

   类似文章

与君共勉:最实用的自律是攒钱,最养眼的自律是健身,最健康的自律是早睡,最改变气质的自律是看书,最好的自律是经济独立 。

您的一个点赞,一句留言,一次打赏,就是博主创作的动力源泉!

↓↓↓↓↓↓写的不错,对你有帮助?赏博主一口饭吧↓↓↓↓↓↓

posted @   Marydon  阅读(6311)  评论(0编辑  收藏  举报
编辑推荐:
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· SQL Server 内存占用高分析
· .NET Core GC计划阶段(plan_phase)底层原理浅谈
· .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
阅读排行:
· 我干了两个月的大项目,开源了!
· 推荐一款非常好用的在线 SSH 管理工具
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· 千万级的大表,如何做性能调优?
· .NET周刊【1月第1期 2025-01-05】
点击右上角即可分享
微信分享提示
sorry,本博客所有代码禁止复制,原创代码需扫码支付方可获取!
关闭

1、先加好友再付费,点我加好友;

2、代码不能满足你的需求?加好友付费定制你的专属代码!

3、付费标准及方式,点我查看详情。