Html+CSS的二级联动

最新推荐文章于 2023-09-25 11:10:58 发布

manmanlu2006

最新推荐文章于 2023-09-25 11:10:58 发布

阅读量962

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/manmanlu2006/article/details/96431581

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1方式一：

<body>
<select id="province" οnchange="func1(this)" >
</select>
<select id="city"></select>
</body>
<script>
data = {"广东省":["广州","佛山"],"北京":["海淀","廊坊"], "海南省":["三亚","海口"]};
var pro = document.getElementById("province");
var city = document.getElementById("city");

for (var i in data){
var option_pro = document.createElement("option");
option_pro.innerHTML=i;
pro.appendChild(option_pro);
}

function func1(self){
//console.log((self.options[self.selectedIndex]).innerHTML);
var choice = (self.options[self.selectedIndex]).innerHTML;

var options = city.children;
for (var k=0; k<options.length; k++){
city.removeChild(options[k--]);
}

for (var i in data[choice]){
var option_city = document.createElement("option");
option_city.innerHTML = data[choice][i];
city.appendChild(option_city);
}
}
</script>

参考：https://www.cnblogs.com/klvchen/p/10364333.html

方式二：

var china = [ { "p_name": "吉林省", "p_id": "jl", "cities": [ { "c_name": "长春", "c_id": "cc" }, { "c_name": "四平", "c_id": "sp" }, { "c_name": "通化", "c_id": "th" }, { "c_name": "松原", "c_id": "sy" } ] },{ "p_name": "上海市", "p_id": "sh", "cities": [ { "c_name": "闵行区", "c_id": "mh" }, { "c_name": "徐汇区", "c_id": "xh" }, { "c_name": "黄浦区", "c_id": "hp" }, { "c_name": "浦东新区", "c_id": "pd" } ] } ];

<html>
<head>
<title>二级联动</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>
<body>
<select id="province" name="province">
<option value="none">--请选择省--</option>

</select>

<select id="city" name="city">
<option value="none">--请选择市--</option>
</select>

<script type="text/javascript" src="cities.js"></script>
<script type="text/javascript" >
//获得省级下拉框对象
var province = document.getElementById("province");
//遍历省市数据,并把里面省的数据追加到option选项中
for (var i=0; i<china.length; i++) {
var option = document.createElement("option");
option.value = china[i].p_id;
option.innerHTML = china[i].p_name;
province.appendChild(option);
}
//省级下拉框发生改变事件
province.onchange = function() {
//获取当前点击对象的值
var proid = this.value;
var cities;
//遍历省市数据,把省级下点击的那一个选项的值和省市数据中的
//省级数据对比,如果相等,取出当前的市的数据
for (var i=0; i<china.length; i++) {
if (proid == china[i].p_id) {
cities = china[i].cities;
}
}
//获得市级下拉框对象
var city = document.getElementById("city");
//每次点击省级后,市级初始化,避免高级重复追加
city.innerHTML = "<option value='none'>--请选择市--</option>";
//遍历市级数据,并取出市级数据,追加到市级对象中
for (var i=0; i<cities.length; i++) {
var option = document.createElement("option");
option.innerHTML = cities[i].c_name;
option.value = cities[i].c_id;
city.appendChild(option);
}
}
</script>
</body>
</html>

https://www.cnblogs.com/loveyous/p/7492674.html

js获取select中选择的值

var obj = document.getElementById(”testSelect”); //定位id

var index = obj.selectedIndex; // 选中索引

var text = obj.options[index].text; // 选中文本

var value = obj.options[index].value; // 选中值

jQuery中获得选中select值

第一种方式
$('#testSelect option:selected').text();//选中的文本

$('#testSelect option:selected') .val();//选中的值

$("#testSelect ").get(0).selectedIndex;//索引

第二种方式
$("#tesetSelect").find("option:selected").text();//选中的文本
…….val();
…….get(0).selectedIndex;

//展示函数

var showResult=function(v){

var showLabel=document.getElementById("functioncode");

for(var i=0;i<showLabel.length;i++){

if(showLabel[i].value==v){

showLabel[i].selected="selected";

}

};

manmanlu2006

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html+CSS的二级联动

1方式一：<body> <select id="province" onchange="func1(this)" > </select> <select id="city"></select></body><script> data = {"广东省":["广州","佛山"],...
复制链接

扫一扫