一开始遇到这种二级联动的写法,都是望而却步,今天性质大发,简单的写一篇代码,总结一下,与大家共勉:
一句话说明问题:点击select后,用selectedIndex获取该select选中的索引[index],然后点击第二个select的时候,以该索引去筛选该索引对应的值
看了后是不是感觉很简单,下面我列举一下例子中用到的知识点:
- 请求json数据,用到ajax,为了方面,这里引用JQ
- 监听select的value值的变化用到的是change() 函数
- 一些select的知识:
var obj = document.getElementByIdx_x(”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;
下面我直接粘贴上项目代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<div>
选择城市:
<select id="city" onchange="changeSelect(this.selectedIndex)"> </select>
</div>
<div>
选择学校:
<select id="school"> </select>
</div>
<script>
$.ajax({
//请求方式为get
type: "GET",
//json文件位置
url: "../school.json",
//返回数据格式为json
dataType: "json",
//请求成功完成后要执行的方法
success: function (data) {
// console.log(data);
var temp;
for (var item in data) {
temp += "<option id = " + data[item].id + " >" + data[item].name + "</option>";
console.log(data[item].id + '--------' + data[item].name + '----------------省份');
var arr_province = data[item].name;
var a = data[item].school;
for (let i in a) {
console.log(a[i].name);
}
};
$("#city").append(temp);
}
})
var index = $("#city").get(0).selectedIndex;
function changeSelect(index) {
console.log(index);
$.ajax({
//请求方式为get
type: "GET",
//json文件位置
url: "../school.json",
//返回数据格式为json
dataType: "json",
//请求成功完成后要执行的方法
success: function (data) {
console.log(data);
console.log(data[index].id + '--------' + data[index].name);
var a = data[index].school;
var tpl;
for (var i in a) {
console.log(a[i].name);
tpl += "<option>" + a[i].name + "</option>";
}
$("#school").append(tpl);
}
})
}
</script>
</body>
</html>