怎样实现选单连动？？？？？？

[jinqinghai]

页面上有两个下拉框，选择第一个就自动刷新和第一个有关联关系的第2个下拉框。。。

2个下拉框的内容都是从数据库读出来的。。

现在不知道怎样才能实现连动,最好付上例子，谢谢了！！！

[xmbareheaded]

是在JSP的网页中吗？好像没法直接实现，除非你在选择第一个下拉框的值后再处发一个提交事件（如一个提交按钮），然后刷新当前页面，从而将从数据库中读取的内容赋到2个下样框中去!

[jinqinghai]

是在jsp页面阿！！

不能实现吗？？？？？

[oyp]

http://www.fason.nease.net/samples/bigarea/

[zhonghua2003]

先从数据库中把所有数据读出.定义一个二维数组用来保存数据.
<tr bgcolor="#FFFFFF">
<td height="30"> <div align="left">
<select name="searchC1" onChange="redirect(this.options.selectedIndex)" >
<option value="$"> ——请选择——</option>
<option value="1">餐饮</option>
<option value="2">零售业</option>
<option value="4">汽车</option>
<option value="5">住宿</option>
<option value="6">休闲</option>
<option value="7">公共设施</option>
<option value="8">交通设施</option>
<option value="9">文化、媒体</option>
<option value="A">其他</option>
</select>
</div></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="27"> <div align="left
<select name="searchC2">
<option value="$">——请选择——</option>
</select>
</div></td>
</tr>

<script language="JavaScript">
var tmp1=document.roundForm.searchC2;
function redirect(x)
{
for (j=document.roundForm.searchC2.options.length-1;j>0;j--)
tmp1.options[j]=null;
for (k=0;k<array1[x].length;k++)
{
tmp1.options[k]=new Option(array1[x][k].text,array1[x][k].value);
}
tmp1.options[0].selected=true;
}
</script>

[zhonghua2003]

你要的是这个吗?

[yunxiang]

代码比较复杂。
这是一个已经写成标签的下拉联动。


***********************************************************
package com.kmcrmsoft.business.taglib;

import javax.servlet.jsp.tagext.TagSupport;
import javax.servlet.jsp.JspException;
import org.apache.struts.util.ResponseUtils;
import com.kmcrmsoft.database.DBManager;
import com.kmcrmsoft.database.DBResultSet;

public class Option extends TagSupport {
private DBManager db = new DBManager();

public void setDbmanager(DBManager dbmanager) {
this.db = dbmanager;
}

public DBManager getDbmanager() {
return db;
}

private String valuefield = "ID";
public String getValuefield() {
return valuefield;
}

public void setValuefield(String valuefield) {
this.valuefield = valuefield;
}

private String selectedoption = null;
public String getSelectedoption() {
return valuefield;
}

public void setSelectedvalue(String selectedoption) {
this.selectedoption = selectedoption;
}

private String textfield = "name";
public String getTextfield() {
return textfield;
}

public void setTextfield(String textfield) {
this.textfield = textfield;
}

private String textfield_ex = null;
public String getTextfield_ex() {
return textfield_ex;
}

public void setTextfield_ex(String textfield_ex) {
this.textfield_ex = textfield_ex;
}

private String tablename = "dual";
public String getTablename() {
return tablename;
}

public void setTablename(String tablename) {
this.tablename = tablename;
}

private String where = null;
public String getWhere() {
return where;
}

public void setWhere(String where) {
this.where = where;
}

public String getP_id_field() {
return p_id_field;
}

public void setP_id_field(String p_id_fieldValue) {
this.p_id_field = p_id_fieldValue;
}

public String getP_table_name() {
return p_table_name;
}

public void setP_table_name(String p_table_nameValue) {
this.p_table_name = p_table_nameValue;
}

public void setVar_perfix(String var_perfixValue) {
this.var_perfix = var_perfixValue;
}

public String getVar_perfix() {
return var_perfix;
}

public void setSub_function_name(String function_nameValue) {
this.sub_function_name = function_nameValue;
}

public String getSub_function_name() {
return sub_function_name;
}

public void setFather_function_name(String father_function_nameValue) {
this.father_function_name = father_function_nameValue;
}

public String getFather_function_name() {
return father_function_name;
}

public void setExt_field_name(String[] ext_field_nameValue) {
this.ext_field_name = ext_field_nameValue;
}

public String[] getExt_field_name() {
return ext_field_name;
}

public void setControl_name(String[] control_nameValue) {
this.control_name = control_nameValue;
}

public String[] getControl_name() {
return control_name;
}

public void setP_object_name(String p_object_nameValue) {
this.p_object_name = p_object_nameValue;
}

public String getP_object_name() {
return p_object_name;
}

public void setSub_object_name(String sub_object_nameValue) {
this.sub_object_name = sub_object_nameValue;
}

public String getSub_object_name() {
return sub_object_name;
}

public void setSet_val_function_name(String set_val_function_nameValue) {
this.set_val_function_name = set_val_function_nameValue;
}

public String getSet_val_function_name() {
return set_val_function_name;
}

public void setExt_perfix(String[] ext_perfixValue) {
this.ext_perfix = ext_perfixValue;
}

public String[] getExt_perfix() {
return ext_perfix;
}

public void setAdd_all(boolean add_allValue) {
this.add_all = add_allValue;
}

private String[] control_name; //要被賦值的控件名称
private String[] ext_field_name; //要给控件付值的字段名称 control_name与control_name的长度必须相同
private String[] ext_perfix; //用于选择控件的数组变量前缀

private String p_id_field = null ; //
private String p_table_name = null; //
private String var_perfix = ""; //数组变量前缀
private String sub_function_name = "selectSubItem"; //函数名称
private String father_function_name = "selectFatherItem"; //函数名称
private String sub_object_name = null; //被选择的控件名
private String p_object_name = null; //父的控件名
private String set_val_function_name = "setVal"; //给控件赋值的函数名称
private boolean add_all = false; //如果希望在selectSubItem中增加"全部"option,那就将此值设为true

[nwpulipeng]

混分

[yunxiang]

public int doStartTag() throws JspException {
String strSql = "";
String strOutput = "\n";
String strIsSelected = "";
String strTempID = null;
if (sub_object_name == null || sub_object_name.length() <= 0)
sub_object_name = valuefield;
if (p_object_name == null || p_object_name.length() <= 0)
p_object_name = p_id_field;
//组织sql语句
strSql = "select " + valuefield + "," + textfield+","+p_id_field;
if (ext_field_name != null && ext_field_name.length > 0) {
for (int index = 0; index < ext_field_name.length; index++) {
strSql = strSql + "," + ext_field_name[index];
}
}
/*以下 行代码只适合oracle数据库 看表中是否有“DELETED”字段**********/
DBManager dbC = new DBManager();
String sql = "select count(*) c from col where TNAME='" +
tablename.toUpperCase() + "' and CNAME='DELETED'";
DBResultSet rsC = dbC.Query(sql);
String strDel = "";
if (rsC.getInt("c") > 0) {
strDel = " and deleted<>1 ";
}
rsC.close();
/****************************************************************/

strSql = strSql + " from " +
tablename +
" where 1=1 " + strDel + (where == null ? "" : " and " + where);
/*按照名称排序*/
strSql = strSql +
(where == null || where.indexOf("order by") < 0 ?
" order by " + textfield : "");
DBResultSet rs = db.Query(strSql);

String strContrl="";
String strSelect="";
int i = 0;
int i2=0;
rs.beforeFirst();
String strTempName="";
while (rs.next()) {
//生成option标签
strTempID = rs.getString(1);
strIsSelected = " ";
if((!strTempName.equals(rs.getString(2)))){//如果重名就不显示了

if (strTempID.equals(selectedoption))
strIsSelected = " selected ";
strOutput = strOutput + "<option value=\"" + rs.getString(1) +
"\" " +
strIsSelected + ">" + rs.getString(2) + "</option> \n";
}
strTempName=rs.getString(2);
//生成更改控件内容的数组
if (control_name != null) {
strContrl = strContrl + " " + var_perfix + "_array[" +
i + "]=\"" +
rs.getString(1) +
"\"; \n";
for (int index = 0; index < ext_field_name.length; index++) { //为每个扩展字段生成数组
strContrl = strContrl +
" " +
(ext_perfix == null ? ext_field_name[index] :
ext_perfix[index]) + "_array[" + i +
"] =\"" + rs.getString(ext_field_name[index]) +
"\";\n";
}
i++;
}
//生成下拉选择的数组
if (p_id_field != null && p_id_field.length() > 0) {
strSelect = strSelect + " " + var_perfix + "_tag_p_code[" +
i2 + "]=\"" +
rs.getString(3) +
"\"; " +
" " + var_perfix + "_tag_item_id[" + i2 + "] =\"" +
rs.getString(1) + "\";\n" +
" " + var_perfix + "_tag_item_name[" + i2 + "] =\"" +
rs.getString(2) + "\";\n";
i2++;
}
}
if (control_name != null) {
strOutput = strOutput
+ "<script>\n"
+ " //这个script中的代码是根据下拉框选择的值来更改指定控件的内容 的\n"
+ " var " + var_perfix + "_array = new Array();\n";
for (int index = 0; index < ext_field_name.length; index++) { //为每个扩展字段生成数组
strOutput = strOutput
+ " var " +
(ext_perfix == null ? ext_field_name[index] :
ext_perfix[index]) +
"_array = new Array();\n";
}
strOutput+=strContrl;

[yunxiang]

strOutput = strOutput
+ " function " + set_val_function_name + "(id) {\n"
+ " for (jj = 0; jj < " + i + "; jj++) {\n"
+ " if (" + var_perfix +
"_array[jj] == id) {\n";

for (int index = 0; index < ext_field_name.length; index++) {
strOutput = strOutput
+
" document.all." + control_name[index] +
".value=" +
(ext_perfix == null ? ext_field_name[index] :
ext_perfix[index]) + "_array[jj];\n";
}
strOutput = strOutput
+ "jj=" + i
+ " }\n"
+ " }\n"
+ " }\n";

strOutput = strOutput + "</script>\n";

}

//如果有子项目
if (p_id_field != null && p_id_field.length() > 0) {
strOutput = strOutput
+ "<script>\n"
+ " //这个script中的代码是选择子项目用的\n"
+ " var " + var_perfix + "_tag_p_code = new Array();\n"
+ " var " + var_perfix + "_tag_item_id = new Array();\n"
+ " var " + var_perfix + "_tag_item_name = new Array();\n";

strOutput+=strSelect;

strOutput = strOutput
+ " function " + father_function_name + "(id) {\n"
+ " for (y = 0; y < " + i2 + ";y++){\n"
+ " if(" + var_perfix + "_tag_item_id[y]==id){\n"
+ " p_id_val=" + var_perfix +
"_tag_p_code[y];\n"
+ " y=" + i2 + "\n"
+ " }"
+ " }\n"
+ " for (w = 0; w < document.all." + p_object_name +
".options.length;w++){\n"
+ " if (document.all." + p_object_name +
".options[w].value == p_id_val) {\n"
+ " document.all." + p_object_name +
".options[w].selected=true;\n"
+ " w=document.all." + p_object_name +
".options.length;\n"
+ " }"
+ " }\n"
+ " }\n"
//+ " selectSubItem(document.all." + p_id_field +".value);//选择子项\n"
+ " function " + sub_function_name + "(id) {\n"
+
" for (k = 0; k < document.all." + sub_object_name +
".options.length;)\n"
+ " document.all." + sub_object_name +
".remove(0);\n";
/*如果要增加一个“全部”的option*/
if (add_all) {
strOutput = strOutput
+ " var objOption = new Option(\"全部\",\"-1\");\n"
+
" document.all." + sub_object_name +
".add(objOption);\n";
}
strOutput = strOutput
+ " for (j = 0; j < " + i2 + "; j++) {\n"
+ " if (id==-1||" + var_perfix +
"_tag_p_code[j] == id) {\n"
+
" var objOption = new Option(" + var_perfix +
"_tag_item_name[j], " + var_perfix + "_tag_item_id[j]);\n"
+
" document.all." + sub_object_name +
".add(objOption);\n"
+ " }\n"
+ " }\n"
+ " if(document.all." + sub_object_name +
".options.length>0)document.all." + sub_object_name +
".options[0].selected=true;\n"
+ " }\n"
+ "</script>\n";

}
rs.close();
ResponseUtils.write(pageContext, strOutput);

return (EVAL_BODY_INCLUDE);
}
}

[yunxiang]

其实原理就是先从数据库中把
两个下拉筐所需要的数据都从数据库中读取出来。
有value / name 还有就是他们之间关联的值。

比如当select1中选中了value=7的
那么，select2先删除所有的数据然后再添加 xx字段=7 的所有数据。
这些功能都是通过javascript实现的。

[jinqinghai]

谢谢 zhonghua2003(爱我中华)，你的方法感觉应该可行。。

也感谢 yunxiang(*****) 代码有些看不懂，不过我相信可以实现。。