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

wangzhuoyan 2009-01-13 10:32:55

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

...全文

158 24 打赏收藏转发到动态举报

写回复

用AI写文章

24 条回复

切换为时间正序

请发表友善的回复…

发表回复

ffumax 2009-01-13

打赏
举报

帮顶

wyj1983 2009-01-13

打赏
举报

[Quote=引用 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>
…
[/Quote]

学习了

_重剑无锋_ 2009-01-13

打赏
举报

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

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

wangzhuoyan 2009-01-13

打赏
举报

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

fulianglove 2009-01-13

打赏
举报

[Quote=引用 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]…
[/Quote]
呵呵，这哥们强

酒剑仙 2009-01-13

打赏
举报

明显AJAX才是王道。

_重剑无锋_ 2009-01-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>

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

yukang_ky 2009-01-13

打赏
举报

[Quote=引用 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 ">
未选择
…
[/Quote]

楼上正解，还是用ajax好

wangzhuoyan 2009-01-13

打赏
举报

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

dou_ye 2009-01-13

打赏
举报

ajax比较好

javaboy2006 2009-01-13

打赏
举报

仅供参考。。。



<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返回到页面。

fulianglove 2009-01-13

打赏
举报

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

tzb08 2009-01-13

打赏
举报

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

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

machao299 2009-01-13

打赏
举报

getdate 2009-01-13

打赏
举报

关注

zou_wei_forever 2009-01-13

打赏
举报

可以参考这个：



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

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

zou_wei_forever 2009-01-13

打赏
举报

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

pxcong007 2009-01-13

打赏
举报

wangzhuoyan 2009-01-13

打赏
举报

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

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

基于opencv2.3.1实现的人脸目标检测，利用了基于Haar特征级联分类器，效果很好

级联的操作有级联更新，级联删除。启用级联后，更新一个表的主键值，系统会相应地更新所有匹配的外键值，如果在表A中将姓名为张三的记录改为李四，那么表B中的姓名为张三的所有记录也会随着改为李四。级联删除与...

基于OpenCV新版本3.1.0详细讲述了HAAR与LBP级联分类器的基本原理与使用技巧，通过视频中人脸实时检测与眼睛跟踪例子演示了级联分类器在项目中的运用。通过OpenCV自带的训练工具实现样本数据训练生成自己的级联分类器...

级联操作的作用：当程序员进行某个操作（添加/修改/删除...），我们希望可以自动的完成一些相关的update，delete等操作。在hibernate中，我们通过在xxx.hbm.xml中设置属性的cascade，使2个数据库相关联，这样就使得...