效果：
在页面加载时设置下拉列表：
单击按钮后更新下拉列表的选项：
支持鼠标 或 键盘上下键（回车）选择选项：
完整代码：
<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原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。