jsp页面里能通过使用js实现这种效果吗？(在线等待。。。)

可以,先把两个SELECTION都做成JS数组.
在前一个onChange事件时传this.options.selectedIndex给函数,然后后一个就
document.form.thingname.options[i].selected=true

<FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
  <tr align="center">
    <td nowrap height="11">  <select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>---Select1-------------</option>
<option>Webmaster Sites</option>
<option>News Sites</option>
</select><select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
</select><select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
</select><script>

</script> </td>
  </tr>
</table>
</FORM><p><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://wsabstract.com">Website
Abstraction</a></font></p>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<A href="myjs.htm" target=_blank><FONT color=red> My Js Collection!</FONT></A><br><input type="button" name="Button" value="源代码" onClick= 'window.location = "view-source:" + window.location.href'></div>

请参考下面的代码（相信对你有帮助）：
省份的编码是2位的
地市的编码是4位的
县的编码是6位的
其中他们的前两位是相同的,例如广东省编码为11,深圳市的编码为1101,平安县的编码为112311,只有前两为有规律.怎样把他们三者做成联动的三个下拉框里的内容,选不同的省,其他两个下拉框的市,县对应不同的省同时发生变化下拉框的动态变化要在javascript脚本里实现,数值可由jsp读出,再传到脚本
其实这个挺简单的：例如有三个下拉框，第二个及第三个可以根据第一个框动态的生成。
方法是通过Microsoft的XMLHTTP:(可以动态的生成如下的select框)
<div id="Prov">
<select name="Province" onChange="javascript:Prov(this, document.all.item['City'], document.all.item['County'])">
<option value="11">广东省</option>
.......
</select>
</div>
...
<div id="City">
<select name="CityA">
<option value="1100">广州市</option>
<option value="1101">深圳市</option>
....
</select>
</div>
...
<div id="County">
<select name="CountyA">
<option value="112311">平安县</option>
....
</select>
</div>
...
function Prov(rObjA, rObjB, rObjC)
{
var lRtn = "";
var lXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
var lUrl     = "/yourservlet(or your Jsp page which used to get the datas from DB by parameters)?prov="+rObjA.value;
//alert("lUrl = "+lUrl);
/*
关键是你的选数据的方法，在你的servlet里选数据时的sql语句可以根据url带过来的参数
用between关键词分别可以选出对应市和县，然后按一定的格式输出，例如：
<root>
<error>no</error>
<city>aaa</city>
<county>bbb</county>
<county>ccc</county>
...
</root> 你也可以给元素加上属性，以便让他们对应，例如：
<city id="1100">广州市</city>
<county id="110001">东山区</county>
<county id="110002">天河区</county>
......
这样你动态生成下拉框时只要做一些判别就可以一一对应了。
下面的例子我没有做判别。
*/ lXmlHttp.open("GET", lUrl, false);
lXmlHttp.send();
try
{
    lRtn = lXmlHttp.responseText;//
}
catch(exception)
{
if(exception.description=='系统错误: -1072896748。')
lRtn = "";
}
//alert("lRtn = "+lRtn);
if(lRtn == null && lRtn=="") return false;
                var lXmlDoc = setXmlObj(lRtn);
var lErrorElem = lXmlDoc.getElementsByTagName("error");
for(var i=0; i<lErrorElem.length; i++)
{
    if(lErrorElem[i].text != "no")
{
alert(lErrorElem[i].text);
return false;
}
}

var lCityElem = lXmlDoc.getElementsByTagName("city");
var lCityStr = "";
var lCityArr = new Array(lCityElem.length);
for(var i=0; i<lCityElem.length; i++)
{
    if(!(lCityElem.hasChildNodes))
    {
//alert(""+lCityElem[i].nodeName);
//alert(""+lCityElem[i].text);
    if(lCityElem[i].text != null)
{
                                 //lCityStr += lCityElem[i].text+",";
lCityArr[i] = lCityElem[i].text;
lCityStr += "<option value='"+lCityElem[i].getAttribute("id")+"'>"+lCityElem[i].text+"</option>";
}
    }
}
alert("lCityStr="+lCityStr);
                rObjB.innerHTML = "<select name=\"CityA\">"+lCityStr+"</select>";                var lCountyStr = "";
var lCountyElem = lXmlDoc.getElementsByTagName("county");
var lCountArray = new Array(lCountyElem.length);
for(var i=0; i<lCountyElem.length; i++)
{
    lCountyArray[i] = lCountyElem[i].text;
    lCountyStr += "<option value='"+lCountyElem[i].getAttribute("id")+"'>"+llCountyElem[i].text+"</option>";
}
        alert("lCountyStr="+lCountyStr);
                rObjC.innerHTML = "<select name=\"CountyA\">"+lCountyStr+"</select>"; return true;
} function setXmlObj(sXml){
var xmlDoc= new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
//alert(sXml);
xmlDoc.loadXML(sXml);
return xmlDoc;
       }

<FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
  <tr align="center">
    <td nowrap height="11">  <select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>---Select1-------------</option>
<option>Webmaster Sites</option>
<option>News Sites</option>
</select><select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
</select><select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
</select><script>

</script> </td>
  </tr>
</table>
</FORM><p><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://wsabstract.com">Website
Abstraction</a></font></p>

想了一下，可以用onChange来执行获取列表中选中的值并显示子列表的内容，对jsp不是很熟悉，现抓了点文章看了一下，大致的方法应该可行的。
用javascript获取select列表中选中的值，然后传递给listSub函数，由listSub将值传递给list.jsp作为参数。
<select onChange="listSub(this.options[this.selectedIndex].value)">
..........
</select>
function listSub(value)
{
    document.write("<jsp:include page=\"list.jsp\">");
    document.write("<jsp:param name=\"subname\" value=\"value\" />
    document.write("</jsp:include>");
}

有启发，谢谢大家，我还想更好的控制用户的选择，比方就是我说的“用品名称也可以不用下拉列表的，就用label”，就用品编号用下拉列表，而用品名称通过用户选择用品编号动态显示，这样能实现吗？继续

不管怎么做,反正下拉列表必须传出INDEX来,然后要有对应法则,比如两个数组,用下标的对应就可以找到了,就象一一对应函数一样.

不用js,直接用jsp+servlet就可以了。当用户选择用品编号时，servlet动态连接数据库，然后将jsp页面中的用品名局部重新显示就行了。用js不能做成动态的。

to laodoudou:那这样做效率不是太低了，我没选择一个用品编号，都需调用servlet，现在我已经把记录集保存在ArrayList里了，而且能在jsp页面获得它，我觉得js能够实现动态关联的，已经有了解决方法了。继续

to jmars:现在如何把记录集里的数据存入js数组里呢，我试了，在js里无法引用jsp页面里的ArrayList里保存的记录，有什么好办法吗？

单纯的追求效率不是好的方法。所以才要实行局部刷新。在js中根本无法实行动态更新，你的方法不可行。当然，如果你只是想达到关联这样做是可以的。请你想象一下，当你正在看产品名称时，有人更改了数据库中的数据，你用js如何动态更新？

“用品名称也可以不用下拉列表的，就用label”，就用品编号用下拉列表，而用品名称通过用户选择用品编号动态显示，这样能实现吗？回答：是可以的。
例子代码如下：
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>

</SCRIPT>
</HEAD>
<BODY><P> </P>
<td bgColor="#f3f2f1">
<TABLE>

  <TR>
    <TD bgColor=#f3f2f1>用品名称:<LABEL id=thinkName>打印纸</LABEL>  </TD>
<TD>用品编号:<select name="thingid" LANGUAGE=javascript onchange="return thingid_onchange()">
                      <option value=DYZ selected >DYZ</option>
                      <option value=FXZ>FXZ</option>
                      <option value=LHMS>LHMS</option>
                      <option value=QB>QB</option>
                      <option value=QZB>QZB</option>
                      <option value=YZB>YZB</option>
                      <option value=ZLSB>ZLSB</option>
                      </select></td> </TR></TABLE></BODY>
</HTML>
我建议你用下面这个方法比较简单：
<td bgColor=#f3f2f1>用品编号:<select name="thingid">
                      <option value=DYZ>打印纸（DYZ）</option>
                      <option value=FXZ>复写纸（FXZ）</option>
                      <option value=LHMS>蓝黑墨水（LHMS）</option>
                      <option value=QB>铅笔（QB）</option>
                      <option value=QZB>签字笔（QZB）</option>
                      <option value=YZB>圆珠笔（YZB）</option>
                      <option value=ZLSB>自来水笔（ZLSB）</option>
                      </select></td>
...
当然括号中可省略。
如果你想在选中某一项时需要得到对用用品名称可以用下面方法来写：
<td bgColor=#f3f2f1>用品编号:<select name="thingid">
                      <option value='DYZ|打印纸'>打印纸（DYZ）</option>
                      <option value='FXZ|复写纸'>复写纸（FXZ）</option>
                      <option value='LHMS|蓝黑墨水'>蓝黑墨水（LHMS）</option>
                      <option value='QB|铅笔'>铅笔（QB）</option>
                      <option value='QZB|签字笔'>签字笔（QZB）</option>
                      <option value='YZB|圆珠笔'>圆珠笔（YZB）</option>
                      <option value='ZLSB|自来水笔'>自来水笔（ZLSB）</option>
                      </select></td>
然后可以在脚本中用stringObj.split("|")方法来分割即可。

因为两个下拉列表是对应的，可以通过selectIndex达到你需要的效果。在用品编号的下拉列表中加入OnChange事件
<select name="thingid" onchange="showName()">
........................
</select><script>
  function showName(){
    var tmpIndex = document.all.thingid.selectIndex;
    document.all.thingname.options[i].selected=true;
  }
</script>

调试易

jsp页面里能通过使用js实现这种效果吗？(在线等待。。。)

解决方案 »