<option value="">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!-- 先隐藏第二个select -->
<select id="select2" style="display:none">
</select>
<script>
// 需要引入jquery
// 数据
var data1 = '<option value="11">11</option><option value="12">12</option><option value="13">13</option>'
var data2 = '<option value="21">21</option><option value="22">22</option><option value="23">23</option>'
$(function () {
// 监听change事件
$('#select1').change(function(){
var sValue = $(this).val()
var s2 = $('#select2')
if(sValue) {
// 根据第一个select的value，决定显示哪个数据
s2.html(window['data' + sValue]).show()
} else {
// 根据第一个select的value是空
// 清空第二个select之后隐藏
s2.html('').hide()
}
})
})
</script>
是说当三个表单中的input的value改变时，其他两个也都改成同样的值吗？<script type="text/javascript">
function onload(){
var inputs=document.getElementsByTagName('input')
for (var i=0i<inputs.lengthi++){
if (inputs[i].type!='text')
inputs.splice(i,1)
inputs[i].onchange=function(){
for (var i=0i<inputs.lengthi++){
inputs[i].value=this.value
}
}
}
}
</script>
<!doctype html><html><head><meta charset="utf-8"><title>联动</title></head><body><select id="s1" onChange="move()"><!-- 根据id获取value，onchange（）触发函数move（）修改二级select的text值实现联动 --><option selected value="s1">-- 请选择 --</option>
<!--默认选中-->
<option value="SC">SC</option>
<option value="BJ">BJ</option>
<option value="TJ">TJ</option></select><select id="s2">
<option selected>-- 请选择 --</option>
<!--默认选中，动态生成option --></select><script>
function move()
{
var s1=document.getElementById("s1")var s2=document.getElementById("s2")<!-- 获取一级和二级的属性-->
var add
if(s1.value=="SC")
{
add=new Array("CD","DZ","MY","NC")<!--比对value值，实现对应二级text值的动态生成-->
}else if(s1.value=="BJ")
{
add=new Array("HD","CY","WFJ")<!--比对value值，实现对应二级text值的动态生成-->
}else if(s1.value=="TJ")
{
add=new Array("TJG","TJ","TJY")<!--比对value值，实现对应二级text值的动态生成-->
}else if(s1.value=="s1")
{
add=new Array("请选择")
}
else
{
add=null<!--若没有就为空，当然不可能出现的-->
}
s2.length=0
for(var i=0i<add.lengthi++) { var ss=new Option() ss.text=add[i].split()[0]
s2.add(ss)
<!--把text值添加到二级select中，显示出来-->
}
}</script></body></html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）