• Javascript 获取下拉框选项(Option)的值,动态加载和静态获取

    Javascript Select Option

    动态加载

    效果

    在这里插入图片描述

    代码

    <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 = ''.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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84

    字符串占位符

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    String.prototype.format = function()主要是为了解决下面这一句，将字符串拼接成html
    ele_a_city = ‘{1}’.format(item, item)
    为了解决.format问题

    静态获取

    如何获取select下拉列表选择的值

    //select 的change事件用了获取下拉列表的值
$(document).on("change","#selectSM",function(){
  //获取选择的值
  var condition = $(this).val();
  //其他操作
});


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
  • 相关阅读:
    ros2与web通信实例
    flink时间处理语义
    NUWA论文阅读
    03_Flutter自定义下拉菜单
    js 判断字符串中是否包含某个字符串
    03 Vue脚手架
    内存泄漏Memory leak
    超详细Python自动化测试学习指南，附学习路线图+企业真实项目。看完月薪30K指日可待。。。
    国庆共68条评论《乡村振兴战略下传统村落文化旅游旅游设计》许少辉八一新书
    k8s容器启动不了，一直重启， 报红提示Not Ready
  • 原文地址：https://blog.csdn.net/qq_33704787/article/details/126003398