两个下拉框的联动问题

[onizuka1631]

在workshop的页面中建立两个联动的下拉框 并根据下拉框选择的内容来查询数据库

两个下拉框的数据均来自relate表 字段为（MAINBOARD_ID,MAINBOARD_NAME，PRODUCT_ID，PRODUCT_MODEL）其中id和name为一一对应 一个m id 对应 多个p id

本人用两个hashmap实现了下拉框的选择，请教如何用Javascript 让第一个下拉框的选择决定第二个的内容。

hashmap的代码
以下是在ROWSET控件中的定义
/**
* @jc:sql statement="SELECT PRODUCT_ID AS id,PRODUCT_MODEL AS name FROM TD_RELATION"
*/
ItemSelectNodesString[] getProductMap();

/**
* @jc:sql statement="SELECT MAINBOARD_ID AS id,MAINBOARD_NAME AS name FROM TD_RELATION"
*/
ItemSelectNodesInt[] getMainboardMap();

一下是ItemSelectNodesInt的定义：
package com.tclcc;


import java.util.ArrayList;
import java.util.List;

public class ItemSelectNodesInt implements java.io.Serializable
{
public int id;
public String name = null;
public List children = new ArrayList();

public void setChildren(List children){
this.children = children;
}

public List getChildren(){
return this.children;
}
public ItemSelectNodesInt() {}
public ItemSelectNodesInt(int id, String name)
{
this.id = id;
this.name = name;
}
public String toString(){
return this.name;
}
}


以下是在Global.app中的两个下来框的定义：
/**
* @common:control
*/
private MaintainCase mtC;

//机型 from TD_RELATION
private static Map productMap;

public Map getProductMap(){
if(null == productMap){
productMap = new LinkedHashMap();
try{
ItemSelectNodesString[] array = mtC.getProductMap();
for(int i=0;i<array.length;i++)
productMap.put((array[i].id), array[i].name);
}catch(Exception sql){
sql.printStackTrace();
}
}

return productMap;
}

public void setproductMap(){
productMap = null;
}

//机芯 from TD_RELATION
private static Map mainboardMap;

public Map getMainboardMap(){
if(null == incomeMap){
mainboardMap = new LinkedHashMap();
try{
ItemSelectNodesInt[] array = mtC.getMainboardMap();
for(int i=0;i<array.length;i++)
mainboardMap.put(new Integer(array[i].id), array[i].name);
}catch(Exception sql){
sql.printStackTrace();
}
}

return mainboardMap;
}

public void setMainboardMap(){
mainboardMap = null;
}



页面中的查询框：
<table width="100%" align="center" bgcolor="#FFFFFF" height="760">
<tr>
<td valign="top">
<netui:form tagId="form" action="searchAction">
<netui:parameterMap map="{pageFlow.sortFilterService.rowIdQueryParamsMap}"/>
<table>
<tr class="tcl-f12px">
<td align=right bgcolor="#f0f0f0">机芯：</td>
<td>
<netui:select dataSource="{actionForm.mainboard_id}" optionsDataSource="{globalApp.mainboardMap}"/>
</td>

<td align=right bgcolor="#f0f0f0">机型：</td>
<td>
<netui:select dataSource="{actionForm.product_id}" optionsDataSource="{globalApp.productMap}"/>
</td>
<td align=right bgcolor="#f0f0f0">故障现象：</td>
<td>
<netui:select dataSource="{actionForm.trouble_id}" optionsDataSource="{globalApp.troubleMap}" />
</td>
</tr>
</table>
<netui:imageAnchor action="searchAction" align="center" border="0" src='<%=request.getContextPath() + "/resources/images/bu_see.gif"%>' formSubmit="true">
查看
</netui:imageAnchor>
</netui:form>




如果用javascript实现控制的话 估计要改两个hashmap的数据结构 请教高手解决

[yunbaixingxing]

恩，需要ing~~~~

[onizuka1631]

sakura8sakura(ouyangrui):


如何用JS 实现选择的关联呢?
新建MAP如何得到第一个下拉框的MAINBOARD_ID呢?

[onizuka1631]

还有这两个下拉框 的datasource 是要作为查询的条件的 所以两个下拉框的datasource都必须是各自的id 然后.............

等待答疑ing

[xxrl]

楼主其实应该学习一下下拉联动的具体原理，呵呵
jsp的下拉我还在写当中，我有asp的，你可以先参考一下原理噢
blog.csdn.net/xxrl
非推销

[onizuka1631]

晕啊 高手都没来吗？

[awaysrain]

http://dev.csdn.net/article/28/article/19/19105.shtm

[woodcord]

顶！！！

[sakura8sakura]

用你写得那2个SQL无法实现关联，因为“MAINBOARD_ID”和“PRODUCT_ID”没有联系，建议第1个SQL改为“SELECT MAINBOARD_ID,PRODUCT_ID AS id,PRODUCT_MODEL AS name FROM TD_RELATION”。

你的那两个hashmap可以不变，再加入个hashmap，结构如下

xxxMap.put(MAINBOARD_ID，productMap)

[「已注销」]

uping......

[xxrl]

是啊是啊，老绝 难道只准你混啊 呵呵

[onizuka1631]

问题 终于 解决 了 !

更改 了 JS 和 第二个hashmap

谢谢 大家 的 意见 了

[awaysrain]

呵呵,xxrl(孔曰成仁,孟曰取E)
也来混java版?

[sakura8sakura]

onizuka1631(阿翔)
下拉框应该有change事件，你可以在第一个下拉框的change事件中取得MAINBOARD_ID，然后根据此ID去新建MAP中得到对应的productMap，赋到第二个下拉框。
实际上，我对asp不是很熟，以上只是我的个人看法，仅供参考。

[jinsihou1977]

实际上可以用三以上的下拉框来做这件事情，使用js响应第一个下拉框的onchange事件，根据取值决定显示余下的哪个下拉框，如：

function MM_reloadPage(sel)
{
var index= document.userform.user_type1.selectedIndex
td1.style.display=(sel.options[index].text =="企业")?"":"none";
td2.style.display=(sel.options[index].text =="企业")?"none":"";

}
td1和td2都是可能显示的第二个框的id，sel是第一个框的名字，这个应用是用于判断用户类型是否个人和企业的，进而显示个人和企业分别对应的属性。