淺倉
Lv 4
淺倉 asked in 電腦與網際網路程式設計 · 1 decade ago

JavaScript能否偵測<select>標籤並控制?

我網頁裡面有兩個<select>~<select>下拉式選單的標籤,

A下拉式選單是縣市名稱,B下拉式選單是鄉鎮市區名稱。

當A下拉式選單選擇台北縣,B下拉式選單的選項就只能有台北縣裡面的鄉鎮縣市,依此類推。

要如何用JavaScript實現這樣的功能呢?

(我不要另外增加按鈕來達成事件,希望是直接針對Select標籤就可以有的事件)

2 Answers

Rating
  • 1 decade ago
    Favorite Answer

    你好,

    你的需求有現成例,原始碼太長,放在

    www.carousel.com.tw/temp/sample/addr.rar

    你可以下載

    這類作法原理如下:

    --/ 表單 /-----------

    <form name="form1" method="post" action="">

    <select name="nb" onChange="changeList();">

    <option value="1">國產筆記型電腦</option>

    <option value="2">日系筆記型電腦</option>

    </select>

    <select name="brand">

    <option value="1">華碩 ASUS</option>

    <option value="2">IBM</option>

    </select>

    </form>

    --/ JavaScript /-----------

    JavaScript 的原理則是

    (1)先判斷第一個 SELECT 選到那一項

    (2)指定第二個 SELECT 該有幾項

    (3)把第二個 SELECT 的內容填入

    範例如下

    <script language="javascript">

    function changeList(){ //宣告這裡有個程式,名為 changeList

    if (document.form1.nb.selectedIndex==0){

    //如果使用者選清單 nb 的第一項 

    document.form1.brand.length=2;//指定清單 brand 下拉後有兩項

    document.form1.brand[0].text='華碩 ASUS'; //第一項顯示的文字叫作「華碩 ASUS」

    document.form1.brand[0].value='華碩 ASUS'; //第一項的值是「華碩 ASUS」

    document.form1.brand[1].text='IBM'; //第二項顯示的文字叫作「IBM」

    document.form1.brand[1].value='IBM';//第二項的值是「IBM」

    }

    if (document.form1.nb.selectedIndex==1){

    //如果使用者選清單 nb 的第二項

    document.form1.brand.length=3;//指定清單 brand 下拉後有三項

    document.form1.brand[0].text='Panasonic';//第一項顯示的文字叫作「Panasonic」

    document.form1.brand[0].value='Panasonic';//第一項的值是「Panasonic」

    document.form1.brand[1].text='Toshiba';//第二項顯示的文字叫作「Toshiba」

    document.form1.brand[1].value='Toshiba';//第二項的值是「Toshiba」

    document.form1.brand[2].text='Sony';//第三項顯示的文字叫作「Sony」

    document.form1.brand[2].value='Sony';//第三項的值是「Sony」

    }

    }

    </script>

Still have questions? Get your answers by asking now.