js實現HTML中Select二級聯動

效果圖

選擇後

js代碼

<script language="javascript" type="text/javascript">
 //定義 費用科目 數據數組
    fylxArray = new Array();
    fylxArray[0] = new Array("","");
    fylxArray[1] = new Array("汽車費用","汽油費|過路費|修理費");
    fylxArray[2] = new Array("房屋租賃費","分公司及辦事處房租|宿舍房租|項目房租");
    fylxArray[3] = new Array("差旅費用","餐費|住宿費|交通費");
    fylxArray[4] = new Array("招待費","招待費");
    fylxArray[5] = new Array("辦公費","辦公用品費|辦公費");
    fylxArray[6] = new Array("交通費","交通費");
    fylxArray[7] = new Array("物業費","物業費");
    fylxArray[8] = new Array("租車費","租車費");
    fylxArray[9] = new Array("勞務費","勞務費");
    fylxArray[10] = new Array("通訊費","通訊費");
    fylxArray[11] = new Array("水費","水費");
    fylxArray[12] = new Array("電費","電費|職工福利費");
    fylxArray[13] = new Array("會議費","會議費");
    fylxArray[14] = new Array("中介服務費","審計費|律師費|券商費|其他");
    fylxArray[15] = new Array("快遞費","快遞費");
    fylxArray[16] = new Array("招聘費","招聘費");
    fylxArray[17] = new Array("加班餐費","加班餐費");
    fylxArray[18] = new Array("投標費用","投標報名費|購買標書費");
    fylxArray[19] = new Array("打印裝訂費","打印費|裝訂費|文件製作費");
    fylxArray[20] = new Array("廣告宣傳費","展位費|廣告費|設計費|印刷費");
    fylxArray[21] = new Array("中標服務費","中標服務費");
    fylxArray[22] = new Array("專家諮詢費","專家諮詢費");
    fylxArray[23] = new Array("培訓費","培訓費");
    fylxArray[24] = new Array("打印費","打印費");
    fylxArray[25] = new Array("職工福利費","職工福利費");
    fylxArray[26] = new Array("暖氣費","暖氣費");
    fylxArray[27] = new Array("燃氣費","燃氣費");
    fylxArray[28] = new Array("產檢費","產檢費");
    fylxArray[29] = new Array("生育住院費","生育住院費");
    fylxArray[30] = new Array("生育津貼","生育津貼");
    fylxArray[31] = new Array("醫療保險費","醫療保險費");
    fylxArray[32] = new Array("其他","其他");

    //select 二級聯動
    function getChild(currFylx){
        //當前 所選擇 的費用類型
        var currFylx_value = currFylx.options[currFylx.selectedIndex].value;
        var currFylxid=currFylx.id.substr(0,6)
        //清空 費用科目 下拉選單
        //var currOption= document.getElementById(currFylxid+'_fykm')
        var currOption= $(currFylx).parent().next().children()[0]
        currOption.length=0
        for (var i = 0 ;i <fylxArray.length;i++){
            //得到 當前費用類型 在 費用科目數組中的位置
            if(fylxArray[i][0]==currFylx_value){
                //得到 當前費用類型 下的費用科目
                var tmpfykmArray = fylxArray[i][1].split("|")
                for(var j=0;j<tmpfykmArray.length;j++){
                    //填充 費用科目 下拉選單
                    currOption.options[currOption.length] = new Option(tmpfykmArray[j],tmpfykmArray[j]);
                }
            }   
        }
    }
</script>

頁面代碼

<td class="ff"><select style="width:100px"  name="select_name" onChange = "getChild(this)">
<option value="">--無--</option>
<option value="汽車費用">汽車費用</option>
<option value="房屋租賃費">房屋租賃費</option>
<option value="差旅費用">差旅費用</option>
<option value="招待費">招待費</option>
<option value="辦公費">辦公費</option>
<option value="交通費">交通費</option>
<option value="物業費">物業費</option>
<option value="租車費">租車費</option>
<option value="勞務費">勞務費</option>
<option value="通訊費">通訊費</option>
<option value="水費">水費</option>
<option value="電費">電費</option>
<option value="會議費">會議費</option>
<option value="中介服務費">中介服務費</option>
<option value="快遞費">快遞費</option>
<option value="招聘費">招聘費</option>
<option value="加班餐費">加班餐費</option>
<option value="投標費用">投標費用</option>
<option value="打印裝訂費">打印裝訂費</option>
<option value="廣告宣傳費">廣告宣傳費</option>
<option value="中標服務費">中標服務費</option>
<option value="專家諮詢費">專家諮詢費</option>
<option value="培訓費">培訓費</option>
<option value="打印費">打印費</option>
<option value="職工福利費">職工福利費</option>
<option value="暖氣費">暖氣費</option>
<option value="燃氣費">燃氣費</option>
<option value="產檢費">產檢費</option>
<option value="生育住院費">生育住院費</option>
<option value="生育津貼">生育津貼</option>
<option value="醫療保險費">醫療保險費</option>
<option value="其他">其他</option>
</select></td><!--費用類型-->
<td class="ff"><select style="width:100px" ><option>--無--</option></select></td><!--費用科目-->