用javascript实现下拉列表框的问题

时间：2022-12-30 10:11:43
我有一个数据表，中有四个字段field1、field2、field3、field4 ，我要用第一个下拉列表框的值控制第二个下拉列表框的变化，同时用第二个控制第三个的变化，第三个再控制第四个。我需要的是一个客户端，想想数据库中的数据一定要先下载到本地，该如何组织这些数据呢？我还看到有些是生成数组，怎样生成的？各位有什么好的解决方案？我很着急，特别希望能够有原代码。谢谢！

10 个解决方案

#1

利用数组做菜单连动的例子
你可以用数据库中的数据来动态生成arrSelect，就可以实现你的要求了

<script language="JavaScript">
var arrSelect1 = new Array(2);
var arrSelect2 = new Array(4);
var arrSelect3 = new Array(8);
var arrSelect4 = new Array(16);
var i;

for (i = 0; i <= arrSelect1.length - 1; i ++) {
arrSelect1[i] = new Array(3);
arrSelect1[i][0] = "select1 value" + i;
arrSelect1[i][1] = "select1 text" + i;
arrSelect1[i][2] = -1;
}

for (i = 0; i <= arrSelect2.length - 1; i ++) {
arrSelect2[i] = new Array(3);
arrSelect2[i][0] = "select2 value" + i;
arrSelect2[i][1] = "select2 text" + i;
arrSelect2[i][2] = i % 2;
}

for (i = 0; i <= arrSelect3.length - 1; i ++) {
arrSelect3[i] = new Array(3);
arrSelect3[i][0] = "select3 value" + i;
arrSelect3[i][1] = "select3 text" + i;
arrSelect3[i][2] = i % 4;
}

for (i = 0; i <= arrSelect4.length - 1; i ++) {
arrSelect4[i] = new Array(3);
arrSelect4[i][0] = "select4 value" + i;
arrSelect4[i][1] = "select4 text" + i;
arrSelect4[i][2] = i % 8;
}

function clearOption(select) {
for (i = select.length - 1; i >= 0; i --) {
select.remove(i);
}
}
function changeOption1() {
var i, oOption

clearOption(document.formname.select1);
for (i = 0; i <= arrSelect1.length - 1; i ++) {
oOption = document.createElement("OPTION");
oOption.value = arrSelect1[i][0];
oOption.text = arrSelect1[i][1];
document.formname.select1.add(oOption);
}
document.formname.select1.selectedIndex = -1;
changeOption2();
}
function changeOption2() {
var i, iSelect, oOption;

clearOption(document.formname.select2);
iSelect = -1;
for (i = 0; i <= arrSelect1.length - 1; i ++) {
if (arrSelect1[i][0] == document.formname.select1.value) {
iSelect = i;
break;
}
}
for (i = 0; i <= arrSelect2.length - 1; i ++) {
if (arrSelect2[i][2] == iSelect) {
oOption = document.createElement("OPTION");
oOption.value = arrSelect2[i][0];
oOption.text = arrSelect2[i][1];
document.formname.select2.add(oOption);
}
}
document.formname.select2.selectedIndex = -1;
changeOption3();
}
function changeOption3() {
var i, iSelect, oOption;

clearOption(document.formname.select3);
iSelect = -1;
for (i = 0; i <= arrSelect2.length - 1; i ++) {
if (arrSelect2[i][0] == document.formname.select2.value) {
iSelect = i;
break;
}
}
for (i = 0; i <= arrSelect3.length - 1; i ++) {
if (arrSelect3[i][2] == iSelect) {
oOption = document.createElement("OPTION");
oOption.value = arrSelect3[i][0];
oOption.text = arrSelect3[i][1];
document.formname.select3.add(oOption);
}
}
document.formname.select3.selectedIndex = -1;
changeOption4();
}
function changeOption4() {
var i, iSelect, oOption;

clearOption(document.formname.select4);
iSelect = -1;
for (i = 0; i <= arrSelect3.length - 1; i ++) {
if (arrSelect3[i][0] == document.formname.select3.value) {
iSelect = i;
break;
}
}
for (i = 0; i <= arrSelect4.length - 1; i ++) {
if (arrSelect4[i][2] == iSelect) {
oOption = document.createElement("OPTION");
oOption.value = arrSelect4[i][0];
oOption.text = arrSelect4[i][1];
document.formname.select4.add(oOption);
}
}
document.formname.select4.selectedIndex = -1;
}
</script>
<body onload="changeOption1();">
<form name="formname">
<select name="select1" style="width:150px" onchange="changeOption2()"></select><br>
<select name="select2" style="width:150px" onchange="changeOption3()"></select><br>
<select name="select3" style="width:150px" onchange="changeOption4()"></select><br>
<select name="select4" style="width:150px"></select><br>
</form>
</body>

#2

<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="DataSource" VIEWASTEXT>
<param NAME="UseHeader" VALUE="True"> 
<param NAME="FieldDelim" VALUE=","> 
</object> 
查一下这个最象的用法。是一个TDC控件。如需要详细说明，及程序事例，可写信给我
这个控件主要是把数据库的内容保存成文本并对数据进行操作的。我的E_Mail:
zyj761127@sina.com.cn

#3

如果是数据库动态查询,你可以通过select的onchange事件,将选择的结果提交到一个iframe里,然后由iframe里来处理,并将查询的结果返回到select里!!一切就OK了!! 

#4

说得非常有道理！！！
可以解决吧！

#5

这里有我做过的一个列子：
<SCRIPT LANGUAGE=javascript>
<!--
var bmmc=new Array();
var bmdm=new Array();
var maxlen;
//-->
</SCRIPT>
<%
conn=dbconn()
set rs=Server.CreateObject("ADODB.RecordSet")
sql="SELECT bmmc,bmdm FROM bmgzb where right(left(bmdm,6),2)='00'"
rs.Open sql,conn,1,1
for i=1 to rs.RecordCount 
%>
<SCRIPT LANGUAGE=javascript>
<!--
maxlen=<%=rs.RecordCount%>;
bmmc[<%=i-1%>]='<%=rs.Fields("bmmc")%>';
bmdm[<%=i-1%>]='<%=rs.Fields("bmdm")%>';
//-->
</SCRIPT>
<%
rs.MoveNext 
next 
rs.Close
%>
<SCRIPT LANGUAGE=javascript>
<!--
function left(s,n){
return(s.substr(0,n));
}

function init(shengObj,shiObj){
shengObj.options[0]=new Option("--全国--","all");
shiObj.options[0]=new Option("--全省--","all");
for (var i=0;i<40;i++)  shengObj.remove(1);
for (var i=0;i<40;i++)  shiObj.remove(1);
shiObj.options[0].selected=true;
for(i=0;i<maxlen;i++)
   if((bmdm[i]).substr(2,4)=="0000")
       shengObj.add(new Option(bmmc[i],bmdm[i]));
shengObj.options[0].selected=true;

}

function shengOnchange(shengObj,shiObj){
value=shengObj.value;
for (var i=0;i<40;i++)  shiObj.remove(1);
for(i=0;i<maxlen;i++)
 if(value.substr(0,2)==(bmdm[i]).substr(0,2) && (bmdm[i]).substr(2,4)!="0000")
    shiObj.add(new Option(bmmc[i],bmdm[i]));
}

function window_onload() {
init(form1.sheng,form1.shi);
}

function sheng_onchange() {
shengOnchange(form1.sheng,form1.shi);
}
//-->
</SCRIPT>

<TABLE WIDTH="100%" border=0 height=50 cellpadding=2 cellspacing=2>
          <TR> 
            <TD> 
              <P align=center><FONT color=red><STRONG>
                <SELECT id=sheng 
            name=sheng style="WIDTH: 100px" LANGUAGE=javascript onchange="return sheng_onchange()">
                  <OPTION 
            selected></OPTION>
                </SELECT>
                省
                <SELECT id=shi name=shi 
            style="WIDTH: 100px">
                  <OPTION selected></OPTION>
                </SELECT>
                市 
                </STRONG></FONT></P>
            </TD>
          </TR>
        </TABLE>

#6

楼上的写的太规范了

#7

好

#8

up

#9

er

#10

er

#1

利用数组做菜单连动的例子
你可以用数据库中的数据来动态生成arrSelect，就可以实现你的要求了

<script language="JavaScript">
var arrSelect1 = new Array(2);
var arrSelect2 = new Array(4);
var arrSelect3 = new Array(8);
var arrSelect4 = new Array(16);
var i;

for (i = 0; i <= arrSelect1.length - 1; i ++) {
arrSelect1[i] = new Array(3);
arrSelect1[i][0] = "select1 value" + i;
arrSelect1[i][1] = "select1 text" + i;
arrSelect1[i][2] = -1;
}

for (i = 0; i <= arrSelect2.length - 1; i ++) {
arrSelect2[i] = new Array(3);
arrSelect2[i][0] = "select2 value" + i;
arrSelect2[i][1] = "select2 text" + i;
arrSelect2[i][2] = i % 2;
}

for (i = 0; i <= arrSelect3.length - 1; i ++) {
arrSelect3[i] = new Array(3);
arrSelect3[i][0] = "select3 value" + i;
arrSelect3[i][1] = "select3 text" + i;
arrSelect3[i][2] = i % 4;
}

for (i = 0; i <= arrSelect4.length - 1; i ++) {
arrSelect4[i] = new Array(3);
arrSelect4[i][0] = "select4 value" + i;
arrSelect4[i][1] = "select4 text" + i;
arrSelect4[i][2] = i % 8;
}

function clearOption(select) {
for (i = select.length - 1; i >= 0; i --) {
select.remove(i);
}
}
function changeOption1() {
var i, oOption

clearOption(document.formname.select1);
for (i = 0; i <= arrSelect1.length - 1; i ++) {
oOption = document.createElement("OPTION");
oOption.value = arrSelect1[i][0];
oOption.text = arrSelect1[i][1];
document.formname.select1.add(oOption);
}
document.formname.select1.selectedIndex = -1;
changeOption2();
}
function changeOption2() {
var i, iSelect, oOption;

clearOption(document.formname.select2);
iSelect = -1;
for (i = 0; i <= arrSelect1.length - 1; i ++) {
if (arrSelect1[i][0] == document.formname.select1.value) {
iSelect = i;
break;
}
}
for (i = 0; i <= arrSelect2.length - 1; i ++) {
if (arrSelect2[i][2] == iSelect) {
oOption = document.createElement("OPTION");
oOption.value = arrSelect2[i][0];
oOption.text = arrSelect2[i][1];
document.formname.select2.add(oOption);
}
}
document.formname.select2.selectedIndex = -1;
changeOption3();
}
function changeOption3() {
var i, iSelect, oOption;

clearOption(document.formname.select3);
iSelect = -1;
for (i = 0; i <= arrSelect2.length - 1; i ++) {
if (arrSelect2[i][0] == document.formname.select2.value) {
iSelect = i;
break;
}
}
for (i = 0; i <= arrSelect3.length - 1; i ++) {
if (arrSelect3[i][2] == iSelect) {
oOption = document.createElement("OPTION");
oOption.value = arrSelect3[i][0];
oOption.text = arrSelect3[i][1];
document.formname.select3.add(oOption);
}
}
document.formname.select3.selectedIndex = -1;
changeOption4();
}
function changeOption4() {
var i, iSelect, oOption;

clearOption(document.formname.select4);
iSelect = -1;
for (i = 0; i <= arrSelect3.length - 1; i ++) {
if (arrSelect3[i][0] == document.formname.select3.value) {
iSelect = i;
break;
}
}
for (i = 0; i <= arrSelect4.length - 1; i ++) {
if (arrSelect4[i][2] == iSelect) {
oOption = document.createElement("OPTION");
oOption.value = arrSelect4[i][0];
oOption.text = arrSelect4[i][1];
document.formname.select4.add(oOption);
}
}
document.formname.select4.selectedIndex = -1;
}
</script>
<body onload="changeOption1();">
<form name="formname">
<select name="select1" style="width:150px" onchange="changeOption2()"></select><br>
<select name="select2" style="width:150px" onchange="changeOption3()"></select><br>
<select name="select3" style="width:150px" onchange="changeOption4()"></select><br>
<select name="select4" style="width:150px"></select><br>
</form>
</body>

#2

<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="DataSource" VIEWASTEXT>
<param NAME="UseHeader" VALUE="True"> 
<param NAME="FieldDelim" VALUE=","> 
</object> 
查一下这个最象的用法。是一个TDC控件。如需要详细说明，及程序事例，可写信给我
这个控件主要是把数据库的内容保存成文本并对数据进行操作的。我的E_Mail:
zyj761127@sina.com.cn

#3

如果是数据库动态查询,你可以通过select的onchange事件,将选择的结果提交到一个iframe里,然后由iframe里来处理,并将查询的结果返回到select里!!一切就OK了!! 

#4

说得非常有道理！！！
可以解决吧！

#5

这里有我做过的一个列子：
<SCRIPT LANGUAGE=javascript>
<!--
var bmmc=new Array();
var bmdm=new Array();
var maxlen;
//-->
</SCRIPT>
<%
conn=dbconn()
set rs=Server.CreateObject("ADODB.RecordSet")
sql="SELECT bmmc,bmdm FROM bmgzb where right(left(bmdm,6),2)='00'"
rs.Open sql,conn,1,1
for i=1 to rs.RecordCount 
%>
<SCRIPT LANGUAGE=javascript>
<!--
maxlen=<%=rs.RecordCount%>;
bmmc[<%=i-1%>]='<%=rs.Fields("bmmc")%>';
bmdm[<%=i-1%>]='<%=rs.Fields("bmdm")%>';
//-->
</SCRIPT>
<%
rs.MoveNext 
next 
rs.Close
%>
<SCRIPT LANGUAGE=javascript>
<!--
function left(s,n){
return(s.substr(0,n));
}

function init(shengObj,shiObj){
shengObj.options[0]=new Option("--全国--","all");
shiObj.options[0]=new Option("--全省--","all");
for (var i=0;i<40;i++)  shengObj.remove(1);
for (var i=0;i<40;i++)  shiObj.remove(1);
shiObj.options[0].selected=true;
for(i=0;i<maxlen;i++)
   if((bmdm[i]).substr(2,4)=="0000")
       shengObj.add(new Option(bmmc[i],bmdm[i]));
shengObj.options[0].selected=true;

}

function shengOnchange(shengObj,shiObj){
value=shengObj.value;
for (var i=0;i<40;i++)  shiObj.remove(1);
for(i=0;i<maxlen;i++)
 if(value.substr(0,2)==(bmdm[i]).substr(0,2) && (bmdm[i]).substr(2,4)!="0000")
    shiObj.add(new Option(bmmc[i],bmdm[i]));
}

function window_onload() {
init(form1.sheng,form1.shi);
}

function sheng_onchange() {
shengOnchange(form1.sheng,form1.shi);
}
//-->
</SCRIPT>

<TABLE WIDTH="100%" border=0 height=50 cellpadding=2 cellspacing=2>
          <TR> 
            <TD> 
              <P align=center><FONT color=red><STRONG>
                <SELECT id=sheng 
            name=sheng style="WIDTH: 100px" LANGUAGE=javascript onchange="return sheng_onchange()">
                  <OPTION 
            selected></OPTION>
                </SELECT>
                省
                <SELECT id=shi name=shi 
            style="WIDTH: 100px">
                  <OPTION selected></OPTION>
                </SELECT>
                市 
                </STRONG></FONT></P>
            </TD>
          </TR>
        </TABLE>

#6

楼上的写的太规范了

#7

好

#8

up

#9

er

#10

er
标签：

相关文章