下拉框如何实现联动

条件: 两个下拉框如何实现联动。两个
关键点在联动的时候如何把第二个list中的数据给缩小范围。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

你可以看看这个联动select效果是怎样实现的
用Jquery写了个简单的例子
运行的话需要下载个Jquery包，希望对楼主有所帮助
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript" src="jquery-1.3.js"></script>
  <script type="text/javascript">
    function set(obj){
   var selectLength=obj.find('option').length;
       for(var i=0;i<selectLength;i++){
       if(obj.find('option').eq(i).attr('selected')){
$('#select2').html('');//清空第二个下拉框
if(i==0){
   $('#select2').append('<option>1</option>');//加入选择项
   $('#select2').append('<option>3</option>');//加入选择项
}
if(i==1){
   $('#select2').append('<option>2</option>');//加入选择项
   $('#select2').append('<option>4</option>');//加入选择项
}
   }
   }
}
  </script>
</HEAD> <BODY>
  <select id="select1" onchange="set($(this))">
    <option>1</option>
<option>2</option>
  </select>
   <select id="select2">
    <option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
   </select>
</BODY>
</HTML>
建议楼主看看偶写的代码
二级联动：
http://little-bill.javaeye.com/blog/724573
三级联动：
http://little-bill.javaeye.com/blog/724577还有如果不想再js里把数据写死。
建议还是用ajax吧。当第一select change事件之后提交一个ajax请求，返回一个json数据。放在第二个select里面；
这两个下拉框LIST中的内容是从SESSION中取得到的，然后转给JAVASCRIPT代码中进行操作。
关键是现在第二个下拉框的LIST是没有加如第一个下拉框的所有数据！
省市联动的下拉框都写死了，就是已经是按照第一个条件之后的结果了！
http://www.scriptlover.com/controls/AreaPicker/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>selectOptions3.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
     function madeadd(){
var madeAdd = document.forms[0].address;
var madeAdd1 = document.forms[0].address1;
if(madeAdd.options[0].selected == true){
madeAdd1.options.length = 0;
madeAdd1.options.add(new Option("s", "s"));
}

if(madeAdd.options[1].selected == true){
madeAdd1.options.length = 0;
madeAdd1.options.add(new Option("武汉", "武汉"));
madeAdd1.options.add(new Option("黄冈", "黄冈"));
madeAdd1.options.add(new Option("浠水", "浠水"));
madeAdd1.options.add(new Option("罗田", "罗田"));
madeAdd1.options.add(new Option("大冶", "大冶"));
madeAdd1.options.add(new Option("蕲春", "蕲春"));
}
if(madeAdd.options[2].selected == true){
madeAdd1.options.length = 0;
madeAdd1.options.add(new Option("长沙", "长沙"));
madeAdd1.options.add(new Option("南昌", "南昌"));
}
}

window.onload = function () {
var temp = document.forms[0].address;
var madeAdd1 = document.forms[0].address1;
temp.value = "hb";//"之前选择的值";
if (temp.value == "hb") {
madeAdd1.options.add(new Option("武汉", "武汉"));
madeAdd1.options.add(new Option("黄冈", "黄冈"));
madeAdd1.options.add(new Option("浠水", "浠水"));
madeAdd1.options.add(new Option("罗田", "罗田"));
madeAdd1.options.add(new Option("大冶", "大冶"));
madeAdd1.options.add(new Option("蕲春", "蕲春"));
}
if(temp.value == "hn"){
madeAdd1.options.add(new Option("长沙", "长沙"));
madeAdd1.options.add(new Option("南昌", "南昌"));
}
madeAdd1.value = "蕲春";//第二个文本框选择的值
};

    </script>  </head>

  <body>
   <form>
    <select name="address" onchange="madeadd()">
<option value=""></option>
<option value="hb">湖北</option>
<option value="hn">湖南</option>
</select>
<select name="address1">
<option value="">  </option>
</select>
</form>
  </body>
</html>