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

最新推荐文章于 2024-05-15 22:15:39 发布

CDamogu

最新推荐文章于 2024-05-15 22:15:39 发布

阅读量1.6k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_33704787/article/details/126003398

版权

Javascript Select Option

动态加载
- 效果
- 代码
静态获取
- 如何获取select下拉列表选择的值

动态加载

效果

在这里插入图片描述

代码

<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>

字符串占位符

<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 = '<option class="a_city" value="{0}">{1}</option>'.format(item, item)
			$("#city_select").append(ele_a_city);//添加选项
		}
	};
                                                 
</script>

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();
  //其他操作
});

CDamogu

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Javascript 获取下拉框选项(Option)的值,动态加载和静态获取

String.prototype.format=function()主要是为了解决下面这一句，将字符串拼接成html。/*字符串占位符，类似于python的format函数*///获取城市列表，构造选项添加到select中。//定义函数获取城市列表并显示到下拉列表中。//清空select列表的选项。//按钮绑定单击事件，更新下拉列表。//更新城市列表并显示到下拉列表中。//获取城市列表并显示到下拉列表中。/*下拉列表每一个选项样式*//*下拉列表样式*///重新设置城市列表。...
复制链接

扫一扫