js實現(xiàn)HTML中Select二級聯(lián)動的實例
更新時間:2018年01月05日 15:22:39 作者:一包大豫竹
下面小編就為大家分享一篇js實現(xiàn)HTML中Select二級聯(lián)動的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
效果圖

選擇后

js代碼
<script language="javascript" type="text/javascript">
//定義 費用科目 數(shù)據(jù)數(shù)組
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("物業(yè)費","物業(yè)費");
fylxArray[8] = new Array("租車費","租車費");
fylxArray[9] = new Array("勞務(wù)費","勞務(wù)費");
fylxArray[10] = new Array("通訊費","通訊費");
fylxArray[11] = new Array("水費","水費");
fylxArray[12] = new Array("電費","電費|職工福利費");
fylxArray[13] = new Array("會議費","會議費");
fylxArray[14] = new Array("中介服務(wù)費","審計費|律師費|券商費|其他");
fylxArray[15] = new Array("快遞費","快遞費");
fylxArray[16] = new Array("招聘費","招聘費");
fylxArray[17] = new Array("加班餐費","加班餐費");
fylxArray[18] = new Array("投標費用","投標報名費|購買標書費");
fylxArray[19] = new Array("打印裝訂費","打印費|裝訂費|文件制作費");
fylxArray[20] = new Array("廣告宣傳費","展位費|廣告費|設(shè)計費|印刷費");
fylxArray[21] = new Array("中標服務(wù)費","中標服務(wù)費");
fylxArray[22] = new Array("專家咨詢費","專家咨詢費");
fylxArray[23] = new Array("培訓(xùn)費","培訓(xùn)費");
fylxArray[24] = new Array("打印費","打印費");
fylxArray[25] = new Array("職工福利費","職工福利費");
fylxArray[26] = new Array("暖氣費","暖氣費");
fylxArray[27] = new Array("燃氣費","燃氣費");
fylxArray[28] = new Array("產(chǎn)檢費","產(chǎn)檢費");
fylxArray[29] = new Array("生育住院費","生育住院費");
fylxArray[30] = new Array("生育津貼","生育津貼");
fylxArray[31] = new Array("醫(yī)療保險費","醫(yī)療保險費");
fylxArray[32] = new Array("其他","其他");
//select 二級聯(lián)動
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++){
//得到 當前費用類型 在 費用科目數(shù)組中的位置
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="物業(yè)費">物業(yè)費</option> <option value="租車費">租車費</option> <option value="勞務(wù)費">勞務(wù)費</option> <option value="通訊費">通訊費</option> <option value="水費">水費</option> <option value="電費">電費</option> <option value="會議費">會議費</option> <option value="中介服務(wù)費">中介服務(wù)費</option> <option value="快遞費">快遞費</option> <option value="招聘費">招聘費</option> <option value="加班餐費">加班餐費</option> <option value="投標費用">投標費用</option> <option value="打印裝訂費">打印裝訂費</option> <option value="廣告宣傳費">廣告宣傳費</option> <option value="中標服務(wù)費">中標服務(wù)費</option> <option value="專家咨詢費">專家咨詢費</option> <option value="培訓(xùn)費">培訓(xùn)費</option> <option value="打印費">打印費</option> <option value="職工福利費">職工福利費</option> <option value="暖氣費">暖氣費</option> <option value="燃氣費">燃氣費</option> <option value="產(chǎn)檢費">產(chǎn)檢費</option> <option value="生育住院費">生育住院費</option> <option value="生育津貼">生育津貼</option> <option value="醫(yī)療保險費">醫(yī)療保險費</option> <option value="其他">其他</option> </select></td><!--費用類型--> <td class="ff"><select style="width:100px" ><option>--無--</option></select></td><!--費用科目-->
以上這篇js實現(xiàn)HTML中Select二級聯(lián)動的實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中獲得CheckBox狀態(tài)的方法小結(jié)
在 JavaScript 中,獲取復(fù)選框(CheckBox)的狀態(tài)(選中或未選中)可以通過以下幾種方式實現(xiàn),以下是具體方法及示例,并通過代碼示例介紹的非常詳細,需要的朋友可以參考下2025-03-03
JS實現(xiàn)計算小于非負數(shù)n的素數(shù)的數(shù)量算法示例
這篇文章主要介紹了JS實現(xiàn)計算小于非負數(shù)n的素數(shù)的數(shù)量算法,可實現(xiàn)針對一定范圍內(nèi)素數(shù)個數(shù)的統(tǒng)計功能,涉及javascript數(shù)值運算相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
js使用onmousemove和onmouseout獲取鼠標坐標的方法
這篇文章主要介紹了js使用onmousemove和onmouseout獲取鼠標坐標的方法,涉及javascript操作鼠標事件的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03

