jQuery动态更新下拉列表（使用select组件）

chanbzou1981

已于 2022-02-12 22:46:58 修改

阅读量2.3k

点赞数 1

于 2022-02-12 21:36:20 首次发布

本文链接：https://blog.csdn.net/chanbzou1981/article/details/122902336

版权

JavaScript jQuery 下拉列表交互事件监听

关键词由CSDN通过智能技术生成

效果：

在页面加载时设置下拉列表：

单击按钮后更新下拉列表的选项：

支持鼠标或键盘上下键（回车）选择选项：

完整代码：

<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>

<title>自定义下拉列表</title>

<style>
/* 下拉列表样式 */
.my_select{
	width: 100px;
    border-radius: 0.3rem;
    border: 1px solid #ccc;
    box-shadow: 0 1px 6px 0 rgb(0 0 0 / 15%);
    box-sizing: border-box;
}

/* 下拉列表每一个选项样式*/ 
.a_city {
    color: red;
}
</style>

</head>
<body>
    <form>
    城市: <select id="city_select" class="my_select" name="citys">  </select>
	
	<button id="update_citys" type="button" >更新城市列表</button>
    <form>
<body>

<script>
/*字符串占位符，类似于 python 的 format 函数*/
String.prototype.format = function () {
    if (arguments.length == 0) return this;
    var param = arguments[0];
    var s = this;
    if (typeof (param) == 'object') {
        for (var key in param)
            s = s.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);
        return s;
    } else {
        for (var i = 0; i < arguments.length; i++)
            s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
        return s;
    }
};

</script>

<script>
    
    //全局变量
    var citys = ["北京", "上海", "广州", "深圳"];

	//定义函数：获取城市列表并显示到下拉列表中
	$.fn.show_list = function(){
		$("#city_select option").remove();//清空 select 列表的选项
		//获取城市列表，构造选项添加到 select 中。
		for(let item of citys) {
			console.log(item);
			ele_a_city = '<option class="a_city" value="{0}">{1}</option>'.format(item, item)
			$("#city_select").append(ele_a_city);//添加选项
		}
	};

	//按钮绑定单击事件，更新下拉列表
	$("#update_citys").on("click", function(event){
		citys = ["西安", "武汉", "成都", "南昌"]; //重新设置城市列表
		$.fn.show_list(); //更新城市列表并显示到下拉列表中
	});

	
	
	$(document).ready(function(){ //页面加载时执行
		$.fn.show_list(); //获取城市列表并显示到下拉列表中
	});

</script>


</html>

注意事项：

1、引用的 jquery请根据需要重新设置（可引用本地文件或服务器文件）：

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

2、自定义了 format 方法，方便对字符串的操作，与Python的format函数功能类似。

3、欢迎一键三连（点赞、评论、收藏）哈哈😃。

后面我将发表一个自定义下拉列表（使用原始的事件监听机制）的博客，欢迎关注。

后记：已经发表自定义下拉列表（使用原始的事件监听机制），在搜索框中使用_chanbzou1981的博客-CSDN博客

chanbzou1981

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫