新手编程1001问（2）
Q：前端如何实现页面下拉框Select的联动？
A：上一期，我们回答了JS/JQuery如何获取下拉框选中的文本和值。那么今天的问题，我们可以继续聊聊下拉框了。
下拉框在前端设计中是一个很常用的列表控件。独立的下拉框要实现起来并不难。但是，有时候我们会遇到两个甚至多个下拉框需要联动的问题，这时候，页面的实现就不是一个简单的交互了。它需要我们根据上一个下拉框选中的值来动态更新下一个下拉框的列表。
因此，实现联动需要解决的问题关键在于，页面不刷新的情况下，能够根据上一个下拉框的值，获取下一个下拉框的列表数据，并更新到列表。
解决这个问题的关键方法分两步：
第一步：使用Ajax，页面不刷新，获取下一个下拉框的列表数据。
第二步：使用JQery，将Ajax获取的列表数据更新到指定的下拉框。
案例：页面上有Select1和Select2，需求是Select2的列表数据依赖于Select1选中的值。
先看Ajax代码：
$.Ajax({
url:“/myAction/getSelect”,
async:false,
type:”post”,
datatype:”json”,
data:{
//Select1的值提交到服务端
myval:$(“#Select1”.val())
},
success:function(data){
}
});
再看JQuery代码：
//首先清空Select2
$(“#Select2”).empty();
//先定义默认选项
("<option></option>").val("0").text("请选择...").appendTo(
//再将Ajax拿到的数据更新到Select2
.each(data, function (i, item) { ("<option></option>").val(item["myval"]).text(item["mytext"]).appendTo(
//上面的代码使用到了JQuery的each()方法，不熟悉的同学可以自己先研究一下，我们找时间也可以专门聊聊这个方法。
完整的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Script/jquery-1.9.1.min.js"></script>
<title>Index</title>
</head>
<script type="text/javascript">
$("document").ready(function(){
$("#Select1").change(function(){
//1-根据Select1的值获取列表数据
Var mydata = “”;
$.ajax({
url:“/myAction/getSelect”,
async:false,
type:”post”,
datatype:”json”,
data:{
//Select1的值提交到服务端
set_val:$(“#Select1”.val())
},
success:function(data){
mydata = data;
}
});
//2-将Ajax获取的数据更新到Select2
//清空Select2控件
$(“#Select2”).empty();
("<option></option>").val("").text("请选择...").appendTo(
.each(mydata, function (i, item) { ("<option></option>").val(item["myval"]).text(item["myText"]).appendTo(
});
});
</script>
<body>
<div style="margin:20px;">
<b>JS如何获取选中的值和文本？</b>
<br /><br />
<select id="Select1">
<option value="0">请选择...</option>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
<br />
<select id="Select2">
<option value="0">请选择...</option>
</select>
</div>
</body>
</html>
感兴趣的读者，复制以上代码，可以自行测试。
腾讯云开发者
