关于级联操作问题，在线等，高分相送，急急急！！

时间：2022-08-31 09:33:12
需求这样的，
1.用户区域 2.用户名字3.用户手机号码（都是下拉框）
现在在下拉框中，数据都已经分别读出来了，但是现在我想这样级联操作，例如我选择区域是北京的，同时把所有在用户读出来，当我选择用户，把手机显示出来，高手们请指点下，最好有代码能写出来，谢谢

24 个解决方案

#1

数据都已经读出来，那么就用JavaScript操作select标签就可以了

#2

可以参考这个： 


<html>

<head><title>select 与text测试页</title>

<script   language=JavaScript>

function   Love(ID,guige,mark,price)

{this.ID         =   ID;

this.guige     =   guige;

this.mark   =   mark;

this.price = price;

}

var   Love_Array   =   Array(6);

Love_Array[0]   =   new   Love("2","3*4*5     ","khgm      ","120");

Love_Array[1]   =   new   Love("4","8*7*6     ","贵贵      ","10000");

Love_Array[2]   =   new   Love("5","有关      ","仍有      ","1234");

Love_Array[3]   =   new   Love("7","33sss     ","ww        ","333");

Love_Array[4]   =   new   Love("8","74        ","77        ","74");

Love_Array[5]   =   new   Love("9","22        ","22        ","22");

function   chec(love_id)

{

var   love_shb   =   "";

var   love_guige   =   "";

var    love_price = "";

for   (i   =   0;i   <   Love_Array.length;i++)

{   if   (Love_Array[i].ID   ==   love_id)

{      love_shb   =   Love_Array[i].mark;

      love_guige   =   Love_Array[i].guige;

    love_price = Love_Array[i].price;

 }

}

  document.uform.shb.value   =   love_shb;

 document.uform.guige.value   =   love_guige;

document.uform.danjia.value   =   love_price;

}

</script> 

</head>

<body>

<center>

<form   name="uform">

<table width=387>

<tr>

 <td width="79">产品名称:</td>

 <td width="296">&nbsp;&nbsp;

   <select   name="select" onchange="chec(this.options[this.selectedIndex].value);">

           

     <option value=2>小         </option>

     

     <option value=4>大的       </option>

     

     <option value=5>*     </option>

     

     <option value=7>www        </option>

     

     <option value=8>745        </option>

     

     <option value=9>h221       </option>

     

   </select>

  </td>

</tr>

<tr>

 <td width="79">产品商标:</td>

 <td width="296">&nbsp;&nbsp;

   <input name="shb" type="text" height=20>

  </td>

</tr>

<tr>

 <td width="79">产品规格:</td>

 <td width="296">&nbsp;&nbsp;

   <input name="guige" type="text" height=20>

  </td>

</tr>

<tr>

 <td width="79">产品单价:</td>

 <td width="296">&nbsp;&nbsp;

   <input name="danjia" type="text" height=20>

  </td>

</tr>

<tr align="center">

 <td colspan="2">&nbsp;

   <input name="submit" type="submit" value="提交"></td>

 </tr>

</table> 

</form>

</center>

</body>

</html>

#3

关注

#4

该回复于2009-03-22 09:04:06被版主删除

#5

该回复于2009-03-22 09:07:49被版主删除

#6

引用 4 楼 lihan6415151528 的回复:
我这里网速慢的要死了， 
简单给你写一下思路吧,觉得还是ajax比较简单 
首先你页面上面应该是三个select，即 

HTML code<select id="s1"></select>
<select id="s2"></select>
<select id="s3"></select>


当调用其onchange事件时候触发函数，即 

HTML code<select id="s1" onchange="changeTo1(this.value)"></select>
<select id="s2" onchange="changeTo2(this.value)"></select>
<select id="s3"></select>
…

这位哥哥的应该更好些。（建议）

#7

引用楼主 wangzhuoyan 的帖子:
需求这样的，
1.用户区域 2.用户名字3.用户手机号码（都是下拉框）
现在在下拉框中，数据都已经分别读出来了，但是现在我想这样级联操作，例如我选择区域是北京的，同时把所有在用户读出来，当我选择用户，把手机显示出来，高手们请指点下，最好有代码能写出来，谢谢


有这样的问题，乘这机会看看ajax啊

#8

现在在下拉框中，数据都已经分别读出来了，但是现在我想这样级联操作，例如我选择区域是北京的，同时把所有在用户读出来，当我选择用户，把手机显示出来，
============================================================================================================================
什么意思？
是不是说初始状态下所有区域的所有用户都在下拉框里，但是选择指定的区域后，用户下拉框里只应该有该区域的用户？？
这样的话应该用AJAX来解决，因为下拉框没法保存足够的信息来让你在页面上判断这个用户的所属区域，
用户select里option两个值分别应该是userId和userName(姓名)，这是不够的。

#9

仅供参考。。。 


<select   name= "bigTypeSelect "   onchange= "getSmallType(this.value); "> 

<option   value= "-1 "> 

未选择 

</option> 

<c:forEach   items= "${bigTypeList} "   var= "temp "> 

    <option   value= "${temp.typeId} "> 

    ${temp.typeName} 

    </option> 

</c:forEach> 

</select> 

<br/> 

<select   name= "typeId "> 

    <option   value= "-1 "> 

    未选择 

    </option> 

</select> 


<script   type= "text/javascript "> 


//创建XMLHttpRequest对象               

        function   createXMLHttpRequest()   

        { 

        //Mozilla   浏览器 

                if(window.XMLHttpRequest)   

                {   

                        XMLHttpReq   =   new   XMLHttpRequest(); 

                } 

                //   IE浏览器 

                              else   if   (window.ActiveXObject)   

                              {   

                        try   

                        { 

                                XMLHttpReq   =   new   ActiveXObject( "Msxml2.XMLHTTP "); 

                        }   

                        catch   (e)   

                        { 

                                try   

                                { 

                                        XMLHttpReq   =   new   ActiveXObject( "Microsoft.XMLHTTP "); 

                                }   

                                catch   (e)   {} 

                        } 

                } 

        } 


        //发送请求函数 

function   getSmallType(bigTypeId) 

{ 

if(bigTypeId   ==   -1) 

{ 

var   typeId   =   document.forms[0].typeId; 

//清空select所有option选项 

typeId.options.length   =   0; 

var   option   =   document.createElement( "option "); 

option.text   =   "未选择 "; 

option.value   =   -1; 

typeId.options.add(option); 

return   false; 

} 


createXMLHttpRequest(); 

XMLHttpReq.onreadystatechange   =   getFinsh;   

var   url   =   "getsmalltype.do?bigtypeid= "+bigTypeId; 

XMLHttpReq.open( "post ",url   ,   true);   

XMLHttpReq.send(null);   

} 


//处理返回响应函数 

function   getFinsh() 

{   

if   (XMLHttpReq.readyState   ==   4)   

{ 

if   (XMLHttpReq.status   ==   200)   

{   

if(window.ActiveXObject) 

{ 

var   xmlDom   =   new   ActiveXObject( "Microsoft.XMLDOM "); 

} 

else 

{ 

if(document.implementation   &&   document.implementation.createDocument) 

{ 

var   xmlDom=document.implementation.createDocument( " ", "doc ",null); 

} 

} 

xmlDom.async   =   false; 

xmlDom.loadXML(XMLHttpReq.responseText); 


var   typeId   =   document.forms[0].typeId; 

//清空select所有option选项 

typeId.options.length   =   0; 


var   smallTypes   =   xmlDom.getElementsByTagName( "smalltypes/smalltype "); 

//包含子类信息 

if(smallTypes.length   !=   0) 

{ 

var   option   =   document.createElement( "option "); 

option.text   =   "未选择 "; 

option.value   =   -1; 

typeId.options.add(option); 


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

                { 

                        //子类ID 

      var   typeIdText   =   smallTypes[i].firstChild.text; 

                

      //子类名 

                        var   typeNameText   =   smallTypes[i].lastChild.text; 

                        

                    //添加子类信息到下拉列表 

var   option   =   document.createElement( "option "); 

option.text   =   typeNameText; 

option.value   =   typeIdText; 

typeId.options.add(option); 

                      } 

                        } 

                        else 

                        { 

                        var   option   =   document.createElement( "option "); 

option.text   =   "无子类 "; 

option.value   =   document.forms[0].bigTypeSelect.options(document.forms[0].bigTypeSelect.selectedIndex).value; 

typeId.options.add(option); 

                        } 

}   

else   

{   

alert( "Error   data:\n "+   XMLHttpReq.statusText);   

        }   

        } 

  } 

------------------------ 
提交到getsmalltype.do后根据bigtypeid返回所属子类ID+子类NAME集合组装成xml返回到页面。

#10

ajax比较好

#11

我用的是dojo框架，怎么解决这个问题。或者是脚本也可以

#12

引用 9 楼 javaboy2006 的回复:
仅供参考。。。 

HTML code
<select   name= "bigTypeSelect "   onchange= "getSmallType(this.value); "> 
<option   value= "-1 "> 
未选择 
</option> 
<c:forEach   items= "${bigTypeList} "   var= "temp "> 
    <option   value= "${temp.typeId} "> 
    ${temp.typeName} 
    </option> 
</c:forEach> 
</select> 
<br/> 
<select   name= "typeId "> 
    <option   value= "-1 "> 
    未选择 
…


楼上正解，还是用ajax好

#13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
      function change(){
     var xzqhid=document.all.address.options[document.all.address.selectedIndex].value;
 var user=document.all.user;
 var tel=document.all.tel;
 var userAll=document.all.userAll;
 var telAll=document.all.telAll;
 
  for(i=user.options.length-1;i>=0;i--)   
      {   
         user.options.remove(i);   
      }   
      
      for(i=tel.options.length-1;i>=0;i--)   
      {   
         tel.options.remove(i);   
      }  
  
  if(parseInt(xzqhid)==0){
          return;
      }
  user.add(new Option("---选择人员---",0));
   for(var i=0;i<userAll.options.length;i++)
{
if(userAll.options[i].addressid==xzqhid)
  {
user.add(new Option(userAll.options[i].text,userAll.options[i].value));
  }      
}
  }
  
  function changeUser(){
     var userid=document.all.user.options[document.all.user.selectedIndex].value;
 var tel=document.all.tel;
 var telAll=document.all.telAll;
 
  for(i=tel.options.length-1;i>=0;i--)   
      {   
         tel.options.remove(i);   
      } 
  if(parseInt(userid)==0){
          return;
      }
  for(var i=0;i<telAll.options.length;i++)
{
if(telAll.options[i].userid==userid)
  {
tel.add(new Option(telAll.options[i].text,telAll.options[i].value));
  }      
}
 
  }
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <label>
  <select name="address" onchange="change()">
  <option value="0">---选择地区---</option>
     <option value="1">北京</option>
 <option value="2">上海</option>
 <option value="3">深圳</option>
 <option value="4">广州</option>    
  </select>
  </label>
  <label>
  <select name="user" onchange="changeUser()">
  </select>
  </label>
  <label>
  <select name="tel">
  </select>
  </label>
  <label>
  <!--数据库里面读取的信息，加一个属性-->
  <select name="userAll" style="display:none">
     <option value="1" addressid='1'>aaaaaaaa</option>
 <option value="2" addressid='1'>bbbbbbbbbb</option>
 <option value="3" addressid='2'>cccccc</option>
 <option value="4" addressid='2'>dddddddddd</option>
 <option value="5" addressid='3'>eeeeeeeeee</option>
 <option value="6" addressid='3'>wwwwwwwwww</option>
 <option value="7" addressid='4'>sssssssss</option>
 <option value="8" addressid='4'>ffff</option>
 <option value="9" addressid='3'>hhhh</option>
 <option value="10" addressid='4'>ttttt</option>
  </select>
  </label>
  <label>
  <!--数据库里面读取的信息，加一个属性-->
  <select name="telAll" style="display:none">
     <option value="1302102302" userid='1'>1302102301a</option>
 <option value="1302102302" userid='2'>1302102302b</option>
 <option value="1302102302" userid='3'>1302102303c</option>
 <option value="1302102302" userid='1'>1302102301a</option>
 <option value="1302102302" userid='2'>1302102302b</option>
 <option value="1302102302" userid='3'>1302102303c</option>
 <option value="1302102302" userid='4'>1302102304d</option>
 <option value="1302102302" userid='5'>1302102305e</option>
 <option value="1302102302" userid='6'>1302102306w</option>
 <option value="1302102302" userid='7'>1302102307s</option>
 <option value="1302102302" userid='8'>1302102308f</option>
  </select>
  </label>
</form>
</body>
</html>


试试这个！！！！！！！  ^_^

#14

明显AJAX才是王道。

#15

引用 13 楼 wuxu009 的回复:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档 </title> 
<script> 
      function change(){ 
    var xzqhid=document.all.address.options[document.all.address.selectedIndex]…

呵呵，这哥们强

#16

该回复于2009-01-20 04:44:00被版主删除

#17

13楼，例子符合我的要求有，谢谢大家的帮助，我在是这把这东西加到我使用的dojo里

#18

引用 17 楼 wangzhuoyan 的回复:
13楼，例子符合我的要求有，谢谢大家的帮助，我在是这把这东西加到我使用的dojo里


哈哈哈，符合的话给分吧，呵呵。加到dojo里面也一样，主要是往那两个隐藏的下拉框填充数据就行

#19

引用 4 楼 lihan6415151528 的回复:
我这里网速慢的要死了， 
简单给你写一下思路吧,觉得还是ajax比较简单 
首先你页面上面应该是三个select，即 

HTML code<select id="s1"></select>
<select id="s2"></select>
<select id="s3"></select>


当调用其onchange事件时候触发函数，即 

HTML code<select id="s1" onchange="changeTo1(this.value)"></select>
<select id="s2" onchange="changeTo2(this.value)"></select>
<select id="s3"></select>
…


学习了

#20

该回复于2009-03-22 09:07:48被版主删除

#21

帮顶

#22

我现在数据已经都有了，主要是我说的这种级联关系没有，而且我担心数据能不能对应啊，不用在数据库加什么字段把！

<select name="address" onchange="javascript:icallcenter.customerorder.select();">
 <%=HtmlUtil.getOptions("SENDAREA",true)%>
</select>
快递员:
<select name="user" >
   <%=HtmlUtil.getOptions("SENDNAME",true) %>
</select>
发送号码：
<select name="tel">
<%=HtmlUtil.getOptions("SENDNUMBER",true) %>
</select>

#23

引用 4 楼 lihan6415151528 的回复:
我这里网速慢的要死了， 
简单给你写一下思路吧,觉得还是ajax比较简单 
首先你页面上面应该是三个select，即 

HTML code<select id="s1"></select>
<select id="s2"></select>
<select id="s3"></select>


当调用其onchange事件时候触发函数，即 

HTML code<select id="s1" onchange="changeTo1(this.value)"></select>
<select id="s2" onchange="changeTo2(this.value)"></select>
<select id="s3"></select>
…


曾经用此方法写过一个从XMl中读取信息并级联显示的例子

#24

该回复于2009-01-20 04:41:19被版主删除

#1

数据都已经读出来，那么就用JavaScript操作select标签就可以了

#2

可以参考这个： 


<html>

<head><title>select 与text测试页</title>

<script   language=JavaScript>

function   Love(ID,guige,mark,price)

{this.ID         =   ID;

this.guige     =   guige;

this.mark   =   mark;

this.price = price;

}

var   Love_Array   =   Array(6);

Love_Array[0]   =   new   Love("2","3*4*5     ","khgm      ","120");

Love_Array[1]   =   new   Love("4","8*7*6     ","贵贵      ","10000");

Love_Array[2]   =   new   Love("5","有关      ","仍有      ","1234");

Love_Array[3]   =   new   Love("7","33sss     ","ww        ","333");

Love_Array[4]   =   new   Love("8","74        ","77        ","74");

Love_Array[5]   =   new   Love("9","22        ","22        ","22");

function   chec(love_id)

{

var   love_shb   =   "";

var   love_guige   =   "";

var    love_price = "";

for   (i   =   0;i   <   Love_Array.length;i++)

{   if   (Love_Array[i].ID   ==   love_id)

{      love_shb   =   Love_Array[i].mark;

      love_guige   =   Love_Array[i].guige;

    love_price = Love_Array[i].price;

 }

}

  document.uform.shb.value   =   love_shb;

 document.uform.guige.value   =   love_guige;

document.uform.danjia.value   =   love_price;

}

</script> 

</head>

<body>

<center>

<form   name="uform">

<table width=387>

<tr>

 <td width="79">产品名称:</td>

 <td width="296">&nbsp;&nbsp;

   <select   name="select" onchange="chec(this.options[this.selectedIndex].value);">

           

     <option value=2>小         </option>

     

     <option value=4>大的       </option>

     

     <option value=5>*     </option>

     

     <option value=7>www        </option>

     

     <option value=8>745        </option>

     

     <option value=9>h221       </option>

     

   </select>

  </td>

</tr>

<tr>

 <td width="79">产品商标:</td>

 <td width="296">&nbsp;&nbsp;

   <input name="shb" type="text" height=20>

  </td>

</tr>

<tr>

 <td width="79">产品规格:</td>

 <td width="296">&nbsp;&nbsp;

   <input name="guige" type="text" height=20>

  </td>

</tr>

<tr>

 <td width="79">产品单价:</td>

 <td width="296">&nbsp;&nbsp;

   <input name="danjia" type="text" height=20>

  </td>

</tr>

<tr align="center">

 <td colspan="2">&nbsp;

   <input name="submit" type="submit" value="提交"></td>

 </tr>

</table> 

</form>

</center>

</body>

</html>

#3

关注

#4

该回复于2009-03-22 09:04:06被版主删除

#5

该回复于2009-03-22 09:07:49被版主删除

#6

引用 4 楼 lihan6415151528 的回复:
我这里网速慢的要死了， 
简单给你写一下思路吧,觉得还是ajax比较简单 
首先你页面上面应该是三个select，即 

HTML code<select id="s1"></select>
<select id="s2"></select>
<select id="s3"></select>


当调用其onchange事件时候触发函数，即 

HTML code<select id="s1" onchange="changeTo1(this.value)"></select>
<select id="s2" onchange="changeTo2(this.value)"></select>
<select id="s3"></select>
…

这位哥哥的应该更好些。（建议）

#7

引用楼主 wangzhuoyan 的帖子:
需求这样的，
1.用户区域 2.用户名字3.用户手机号码（都是下拉框）
现在在下拉框中，数据都已经分别读出来了，但是现在我想这样级联操作，例如我选择区域是北京的，同时把所有在用户读出来，当我选择用户，把手机显示出来，高手们请指点下，最好有代码能写出来，谢谢


有这样的问题，乘这机会看看ajax啊

#8

现在在下拉框中，数据都已经分别读出来了，但是现在我想这样级联操作，例如我选择区域是北京的，同时把所有在用户读出来，当我选择用户，把手机显示出来，
============================================================================================================================
什么意思？
是不是说初始状态下所有区域的所有用户都在下拉框里，但是选择指定的区域后，用户下拉框里只应该有该区域的用户？？
这样的话应该用AJAX来解决，因为下拉框没法保存足够的信息来让你在页面上判断这个用户的所属区域，
用户select里option两个值分别应该是userId和userName(姓名)，这是不够的。

#9

仅供参考。。。 


<select   name= "bigTypeSelect "   onchange= "getSmallType(this.value); "> 

<option   value= "-1 "> 

未选择 

</option> 

<c:forEach   items= "${bigTypeList} "   var= "temp "> 

    <option   value= "${temp.typeId} "> 

    ${temp.typeName} 

    </option> 

</c:forEach> 

</select> 

<br/> 

<select   name= "typeId "> 

    <option   value= "-1 "> 

    未选择 

    </option> 

</select> 


<script   type= "text/javascript "> 


//创建XMLHttpRequest对象               

        function   createXMLHttpRequest()   

        { 

        //Mozilla   浏览器 

                if(window.XMLHttpRequest)   

                {   

                        XMLHttpReq   =   new   XMLHttpRequest(); 

                } 

                //   IE浏览器 

                              else   if   (window.ActiveXObject)   

                              {   

                        try   

                        { 

                                XMLHttpReq   =   new   ActiveXObject( "Msxml2.XMLHTTP "); 

                        }   

                        catch   (e)   

                        { 

                                try   

                                { 

                                        XMLHttpReq   =   new   ActiveXObject( "Microsoft.XMLHTTP "); 

                                }   

                                catch   (e)   {} 

                        } 

                } 

        } 


        //发送请求函数 

function   getSmallType(bigTypeId) 

{ 

if(bigTypeId   ==   -1) 

{ 

var   typeId   =   document.forms[0].typeId; 

//清空select所有option选项 

typeId.options.length   =   0; 

var   option   =   document.createElement( "option "); 

option.text   =   "未选择 "; 

option.value   =   -1; 

typeId.options.add(option); 

return   false; 

} 


createXMLHttpRequest(); 

XMLHttpReq.onreadystatechange   =   getFinsh;   

var   url   =   "getsmalltype.do?bigtypeid= "+bigTypeId; 

XMLHttpReq.open( "post ",url   ,   true);   

XMLHttpReq.send(null);   

} 


//处理返回响应函数 

function   getFinsh() 

{   

if   (XMLHttpReq.readyState   ==   4)   

{ 

if   (XMLHttpReq.status   ==   200)   

{   

if(window.ActiveXObject) 

{ 

var   xmlDom   =   new   ActiveXObject( "Microsoft.XMLDOM "); 

} 

else 

{ 

if(document.implementation   &&   document.implementation.createDocument) 

{ 

var   xmlDom=document.implementation.createDocument( " ", "doc ",null); 

} 

} 

xmlDom.async   =   false; 

xmlDom.loadXML(XMLHttpReq.responseText); 


var   typeId   =   document.forms[0].typeId; 

//清空select所有option选项 

typeId.options.length   =   0; 


var   smallTypes   =   xmlDom.getElementsByTagName( "smalltypes/smalltype "); 

//包含子类信息 

if(smallTypes.length   !=   0) 

{ 

var   option   =   document.createElement( "option "); 

option.text   =   "未选择 "; 

option.value   =   -1; 

typeId.options.add(option); 


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

                { 

                        //子类ID 

      var   typeIdText   =   smallTypes[i].firstChild.text; 

                

      //子类名 

                        var   typeNameText   =   smallTypes[i].lastChild.text; 

                        

                    //添加子类信息到下拉列表 

var   option   =   document.createElement( "option "); 

option.text   =   typeNameText; 

option.value   =   typeIdText; 

typeId.options.add(option); 

                      } 

                        } 

                        else 

                        { 

                        var   option   =   document.createElement( "option "); 

option.text   =   "无子类 "; 

option.value   =   document.forms[0].bigTypeSelect.options(document.forms[0].bigTypeSelect.selectedIndex).value; 

typeId.options.add(option); 

                        } 

}   

else   

{   

alert( "Error   data:\n "+   XMLHttpReq.statusText);   

        }   

        } 

  } 

------------------------ 
提交到getsmalltype.do后根据bigtypeid返回所属子类ID+子类NAME集合组装成xml返回到页面。

#10

ajax比较好

#11

我用的是dojo框架，怎么解决这个问题。或者是脚本也可以

#12

引用 9 楼 javaboy2006 的回复:
仅供参考。。。 

HTML code
<select   name= "bigTypeSelect "   onchange= "getSmallType(this.value); "> 
<option   value= "-1 "> 
未选择 
</option> 
<c:forEach   items= "${bigTypeList} "   var= "temp "> 
    <option   value= "${temp.typeId} "> 
    ${temp.typeName} 
    </option> 
</c:forEach> 
</select> 
<br/> 
<select   name= "typeId "> 
    <option   value= "-1 "> 
    未选择 
…


楼上正解，还是用ajax好

#13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
      function change(){
     var xzqhid=document.all.address.options[document.all.address.selectedIndex].value;
 var user=document.all.user;
 var tel=document.all.tel;
 var userAll=document.all.userAll;
 var telAll=document.all.telAll;
 
  for(i=user.options.length-1;i>=0;i--)   
      {   
         user.options.remove(i);   
      }   
      
      for(i=tel.options.length-1;i>=0;i--)   
      {   
         tel.options.remove(i);   
      }  
  
  if(parseInt(xzqhid)==0){
          return;
      }
  user.add(new Option("---选择人员---",0));
   for(var i=0;i<userAll.options.length;i++)
{
if(userAll.options[i].addressid==xzqhid)
  {
user.add(new Option(userAll.options[i].text,userAll.options[i].value));
  }      
}
  }
  
  function changeUser(){
     var userid=document.all.user.options[document.all.user.selectedIndex].value;
 var tel=document.all.tel;
 var telAll=document.all.telAll;
 
  for(i=tel.options.length-1;i>=0;i--)   
      {   
         tel.options.remove(i);   
      } 
  if(parseInt(userid)==0){
          return;
      }
  for(var i=0;i<telAll.options.length;i++)
{
if(telAll.options[i].userid==userid)
  {
tel.add(new Option(telAll.options[i].text,telAll.options[i].value));
  }      
}
 
  }
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <label>
  <select name="address" onchange="change()">
  <option value="0">---选择地区---</option>
     <option value="1">北京</option>
 <option value="2">上海</option>
 <option value="3">深圳</option>
 <option value="4">广州</option>    
  </select>
  </label>
  <label>
  <select name="user" onchange="changeUser()">
  </select>
  </label>
  <label>
  <select name="tel">
  </select>
  </label>
  <label>
  <!--数据库里面读取的信息，加一个属性-->
  <select name="userAll" style="display:none">
     <option value="1" addressid='1'>aaaaaaaa</option>
 <option value="2" addressid='1'>bbbbbbbbbb</option>
 <option value="3" addressid='2'>cccccc</option>
 <option value="4" addressid='2'>dddddddddd</option>
 <option value="5" addressid='3'>eeeeeeeeee</option>
 <option value="6" addressid='3'>wwwwwwwwww</option>
 <option value="7" addressid='4'>sssssssss</option>
 <option value="8" addressid='4'>ffff</option>
 <option value="9" addressid='3'>hhhh</option>
 <option value="10" addressid='4'>ttttt</option>
  </select>
  </label>
  <label>
  <!--数据库里面读取的信息，加一个属性-->
  <select name="telAll" style="display:none">
     <option value="1302102302" userid='1'>1302102301a</option>
 <option value="1302102302" userid='2'>1302102302b</option>
 <option value="1302102302" userid='3'>1302102303c</option>
 <option value="1302102302" userid='1'>1302102301a</option>
 <option value="1302102302" userid='2'>1302102302b</option>
 <option value="1302102302" userid='3'>1302102303c</option>
 <option value="1302102302" userid='4'>1302102304d</option>
 <option value="1302102302" userid='5'>1302102305e</option>
 <option value="1302102302" userid='6'>1302102306w</option>
 <option value="1302102302" userid='7'>1302102307s</option>
 <option value="1302102302" userid='8'>1302102308f</option>
  </select>
  </label>
</form>
</body>
</html>


试试这个！！！！！！！  ^_^

#14

明显AJAX才是王道。

#15

引用 13 楼 wuxu009 的回复:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档 </title> 
<script> 
      function change(){ 
    var xzqhid=document.all.address.options[document.all.address.selectedIndex]…

呵呵，这哥们强

#16

该回复于2009-01-20 04:44:00被版主删除

#17

13楼，例子符合我的要求有，谢谢大家的帮助，我在是这把这东西加到我使用的dojo里

#18

引用 17 楼 wangzhuoyan 的回复:
13楼，例子符合我的要求有，谢谢大家的帮助，我在是这把这东西加到我使用的dojo里


哈哈哈，符合的话给分吧，呵呵。加到dojo里面也一样，主要是往那两个隐藏的下拉框填充数据就行

#19

引用 4 楼 lihan6415151528 的回复:
我这里网速慢的要死了， 
简单给你写一下思路吧,觉得还是ajax比较简单 
首先你页面上面应该是三个select，即 

HTML code<select id="s1"></select>
<select id="s2"></select>
<select id="s3"></select>


当调用其onchange事件时候触发函数，即 

HTML code<select id="s1" onchange="changeTo1(this.value)"></select>
<select id="s2" onchange="changeTo2(this.value)"></select>
<select id="s3"></select>
…


学习了

#20

该回复于2009-03-22 09:07:48被版主删除

#21

帮顶

#22

我现在数据已经都有了，主要是我说的这种级联关系没有，而且我担心数据能不能对应啊，不用在数据库加什么字段把！

<select name="address" onchange="javascript:icallcenter.customerorder.select();">
 <%=HtmlUtil.getOptions("SENDAREA",true)%>
</select>
快递员:
<select name="user" >
   <%=HtmlUtil.getOptions("SENDNAME",true) %>
</select>
发送号码：
<select name="tel">
<%=HtmlUtil.getOptions("SENDNUMBER",true) %>
</select>

#23

引用 4 楼 lihan6415151528 的回复:
我这里网速慢的要死了， 
简单给你写一下思路吧,觉得还是ajax比较简单 
首先你页面上面应该是三个select，即 

HTML code<select id="s1"></select>
<select id="s2"></select>
<select id="s3"></select>


当调用其onchange事件时候触发函数，即 

HTML code<select id="s1" onchange="changeTo1(this.value)"></select>
<select id="s2" onchange="changeTo2(this.value)"></select>
<select id="s3"></select>
…


曾经用此方法写过一个从XMl中读取信息并级联显示的例子

#24

该回复于2009-01-20 04:41:19被版主删除
标签：

相关文章