用js+jsp實現在同一個下拉式清單中，動態產生多級select選項

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

js|select|動態|下拉|下拉式清單

經過兩天苦戰，總算用js+jsp搞定在同一個下拉框中，在不重新整理頁面的情況下，動態產生多級select選項

一、先確定需求及要達到的效果

要達到的效果如下圖

[

]

為了便於各位的調試，
我將代碼進行了簡化，取資料部分我去掉了，各位可修改成自己用的資料

二、說明
現將該設計中，用到的主要技巧列在下面
1。將資料動態填入js的數組
用如下3句話實現
out.print("<script>");
out.print("selprov[330000] = new Array(new Option('',''), new Option('..','goUp'), new Option('杭州地區','330100'), new Option('寧波地區','330200'), new Option('溫州地區','330300'));");
out.print("</script>");
具體應用時，可以用迴圈，將資料不斷的 out.print(", new Option(xxx,yyy)");添加進去

2.1。當選擇了省份後，將地區資訊填入地區列表
主要用了下面這個迴圈
for(var i=0; i<selprov[hprov.value].length; i++){
harea.add(selprov[hprov.value][i]);
}

2.2。當選擇了地區後，將縣市資訊填入城市列表(實現方法同上)

4。用了隱含技巧，將3個select放入在同一行中的3個<td></td>中，
然後用<td style="display:none">進行隱藏，每次3個<td>中，只有一項是可見的
如：當需要地區顯示時，用如下js語句
d2.style.display="";
d1.style.display="none";
d3.style.display="none";

三、原始碼
<%@ page contentType="text/html; charset=GBK" %>

<html>
<head>
<title>city</title>
<script language="JavaScript">
var selprov = new Array();
var selarea = new Array();
</script>
<%
out.print("<script>");
//對每個省的數組添加地區資料
out.print("selprov[330000] = new Array(new Option('',''), new Option('..','goUp'), new Option('杭州地區','330100'), new Option('寧波地區','330200'), new Option('溫州地區','330300'));");
out.print("selprov[350000] = new Array(new Option('',''), new Option('..','goUp'), new Option('福州地區','350100'), new Option('廈門地區','350200'), new Option('泉州地區','350300'));");
out.print("</script>");

out.print("<script>");
//對每個省每個地區的數組添加縣市資料
out.print("selarea[330100] = new Array(new Option('',''), new Option('..','goUp'), new Option('杭州市','330101'), new Option('蕭山市','330102'), new Option('餘杭市','330102'));");
out.print("selarea[330200] = new Array(new Option('',''), new Option('..','goUp'), new Option('寧波市','330201'), new Option('餘姚市','330202'), new Option('奉化市','330203'));");
out.print("selarea[350100] = new Array(new Option('',''), new Option('..','goUp'), new Option('福州市','350101'), new Option('福清市','350102'), new Option('福xx市','350102'));");
out.print("</script>");
%>
<script>

</script>
<script>
function prov_chg()
{
with (document.all){
  if(hprov.value) {
   var ln = harea.options.length;
   while(ln--) {
    harea.options[ln] = null;
   }
   ln = hcity.options.length;
   while(ln--) {
    hcity.options[ln] = null;
   }
   for(var i=0; i<selprov[hprov.value].length; i++){
    harea.add(selprov[hprov.value][i]);
   }
  }
}
if(document.form1.hprov.value != "")
{
  d2.style.display="";
  d1.style.display="none";
  d3.style.display="none";
}
else {
}
}

function city_chg() {
if (document.form1.hcity.value == "goUp")
{
  d1.style.display="none";
  d2.style.display="";
  d3.style.display="none";
}
}

</script>
</head>
<body bgcolor="#ffffff">
<form name="form1" method="post" action="./city.jsp">
<table >
    <tr> </tr>
    <tr>
      <td style="display:inline " id="d1"> 省份
        <select id="hprov" >
          <option value=""></option>
<%
out.print("<option value='330000'>浙江省</option>");
out.print("<option value='350000'>福建省</option>");
%>
        </select> </td>
      <td style="display:none " id="d2"> 地區
        <select id="harea" >
          <option value=""></option>
        </select> </td>
      <td style="display:none " id="d3"> 縣市
        <select id="hcity" >
          <option value=""></option>
        </select> </td>
    </tr>

</table>
</form>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More