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

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

可以参考这个：<html>
<head><title>select 与text测试页</title>
<script   language=JavaScript>
function   Love(ID,guige,,price)
{this.ID         =   ID;
this.guige     =   guige;
this.   =   ;
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].;
      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">  
   <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">  
   <input name="shb" type="text" height=20>
  </td>
</tr>
<tr>
<td width="79">产品规格:</td>
<td width="296">  
   <input name="guige" type="text" height=20>
  </td>
</tr>
<tr>
<td width="79">产品单价:</td>
<td width="296">  
   <input name="danjia" type="text" height=20>
  </td>
</tr>
<tr align="center">
<td colspan="2"> 
   <input name="submit" type="submit" value="提交"></td>
</tr>
</table>
</form>
</center>
</body>
</html>

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

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

仅供参考<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返回到页面。

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

<!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>
试试这个！！！！！！！  ^_^

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

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

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

<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>

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

调试易

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

解决方案 »