js實(shí)現(xiàn)HTML中Select二級聯(lián)動的實(shí)例
效果圖
選擇后
js代碼
<script language="javascript" type="text/javascript"> //定義 費(fèi)用科目 數(shù)據(jù)數(shù)組 fylxArray = new Array(); fylxArray[0] = new Array("",""); fylxArray[1] = new Array("汽車費(fèi)用","汽油費(fèi)|過路費(fèi)|修理費(fèi)"); fylxArray[2] = new Array("房屋租賃費(fèi)","分公司及辦事處房租|宿舍房租|項(xiàng)目房租"); fylxArray[3] = new Array("差旅費(fèi)用","餐費(fèi)|住宿費(fèi)|交通費(fèi)"); fylxArray[4] = new Array("招待費(fèi)","招待費(fèi)"); fylxArray[5] = new Array("辦公費(fèi)","辦公用品費(fèi)|辦公費(fèi)"); fylxArray[6] = new Array("交通費(fèi)","交通費(fèi)"); fylxArray[7] = new Array("物業(yè)費(fèi)","物業(yè)費(fèi)"); fylxArray[8] = new Array("租車費(fèi)","租車費(fèi)"); fylxArray[9] = new Array("勞務(wù)費(fèi)","勞務(wù)費(fèi)"); fylxArray[10] = new Array("通訊費(fèi)","通訊費(fèi)"); fylxArray[11] = new Array("水費(fèi)","水費(fèi)"); fylxArray[12] = new Array("電費(fèi)","電費(fèi)|職工福利費(fèi)"); fylxArray[13] = new Array("會議費(fèi)","會議費(fèi)"); fylxArray[14] = new Array("中介服務(wù)費(fèi)","審計費(fèi)|律師費(fèi)|券商費(fèi)|其他"); fylxArray[15] = new Array("快遞費(fèi)","快遞費(fèi)"); fylxArray[16] = new Array("招聘費(fèi)","招聘費(fèi)"); fylxArray[17] = new Array("加班餐費(fèi)","加班餐費(fèi)"); fylxArray[18] = new Array("投標(biāo)費(fèi)用","投標(biāo)報名費(fèi)|購買標(biāo)書費(fèi)"); fylxArray[19] = new Array("打印裝訂費(fèi)","打印費(fèi)|裝訂費(fèi)|文件制作費(fèi)"); fylxArray[20] = new Array("廣告宣傳費(fèi)","展位費(fèi)|廣告費(fèi)|設(shè)計費(fèi)|印刷費(fèi)"); fylxArray[21] = new Array("中標(biāo)服務(wù)費(fèi)","中標(biāo)服務(wù)費(fèi)"); fylxArray[22] = new Array("專家咨詢費(fèi)","專家咨詢費(fèi)"); fylxArray[23] = new Array("培訓(xùn)費(fèi)","培訓(xùn)費(fèi)"); fylxArray[24] = new Array("打印費(fèi)","打印費(fèi)"); fylxArray[25] = new Array("職工福利費(fèi)","職工福利費(fèi)"); fylxArray[26] = new Array("暖氣費(fèi)","暖氣費(fèi)"); fylxArray[27] = new Array("燃?xì)赓M(fèi)","燃?xì)赓M(fèi)"); fylxArray[28] = new Array("產(chǎn)檢費(fèi)","產(chǎn)檢費(fèi)"); fylxArray[29] = new Array("生育住院費(fèi)","生育住院費(fèi)"); fylxArray[30] = new Array("生育津貼","生育津貼"); fylxArray[31] = new Array("醫(yī)療保險費(fèi)","醫(yī)療保險費(fèi)"); fylxArray[32] = new Array("其他","其他"); //select 二級聯(lián)動 function getChild(currFylx){ //當(dāng)前 所選擇 的費(fèi)用類型 var currFylx_value = currFylx.options[currFylx.selectedIndex].value; var currFylxid=currFylx.id.substr(0,6) //清空 費(fèi)用科目 下拉選單 //var currOption= document.getElementById(currFylxid+'_fykm') var currOption= $(currFylx).parent().next().children()[0] currOption.length=0 for (var i = 0 ;i <fylxArray.length;i++){ //得到 當(dāng)前費(fèi)用類型 在 費(fèi)用科目數(shù)組中的位置 if(fylxArray[i][0]==currFylx_value){ //得到 當(dāng)前費(fèi)用類型 下的費(fèi)用科目 var tmpfykmArray = fylxArray[i][1].split("|") for(var j=0;j<tmpfykmArray.length;j++){ //填充 費(fèi)用科目 下拉選單 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="汽車費(fèi)用">汽車費(fèi)用</option> <option value="房屋租賃費(fèi)">房屋租賃費(fèi)</option> <option value="差旅費(fèi)用">差旅費(fèi)用</option> <option value="招待費(fèi)">招待費(fèi)</option> <option value="辦公費(fèi)">辦公費(fèi)</option> <option value="交通費(fèi)">交通費(fèi)</option> <option value="物業(yè)費(fèi)">物業(yè)費(fèi)</option> <option value="租車費(fèi)">租車費(fèi)</option> <option value="勞務(wù)費(fèi)">勞務(wù)費(fèi)</option> <option value="通訊費(fèi)">通訊費(fèi)</option> <option value="水費(fèi)">水費(fèi)</option> <option value="電費(fèi)">電費(fèi)</option> <option value="會議費(fèi)">會議費(fèi)</option> <option value="中介服務(wù)費(fèi)">中介服務(wù)費(fèi)</option> <option value="快遞費(fèi)">快遞費(fèi)</option> <option value="招聘費(fèi)">招聘費(fèi)</option> <option value="加班餐費(fèi)">加班餐費(fèi)</option> <option value="投標(biāo)費(fèi)用">投標(biāo)費(fèi)用</option> <option value="打印裝訂費(fèi)">打印裝訂費(fèi)</option> <option value="廣告宣傳費(fèi)">廣告宣傳費(fèi)</option> <option value="中標(biāo)服務(wù)費(fèi)">中標(biāo)服務(wù)費(fèi)</option> <option value="專家咨詢費(fèi)">專家咨詢費(fèi)</option> <option value="培訓(xùn)費(fèi)">培訓(xùn)費(fèi)</option> <option value="打印費(fèi)">打印費(fèi)</option> <option value="職工福利費(fèi)">職工福利費(fèi)</option> <option value="暖氣費(fèi)">暖氣費(fèi)</option> <option value="燃?xì)赓M(fèi)">燃?xì)赓M(fèi)</option> <option value="產(chǎn)檢費(fèi)">產(chǎn)檢費(fèi)</option> <option value="生育住院費(fèi)">生育住院費(fèi)</option> <option value="生育津貼">生育津貼</option> <option value="醫(yī)療保險費(fèi)">醫(yī)療保險費(fèi)</option> <option value="其他">其他</option> </select></td><!--費(fèi)用類型--> <td class="ff"><select style="width:100px" ><option>--無--</option></select></td><!--費(fèi)用科目-->
以上這篇js實(shí)現(xiàn)HTML中Select二級聯(lián)動的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
input type=file 選擇圖片并且實(shí)現(xiàn)預(yù)覽效果的實(shí)例
下面小編就為大家?guī)硪黄猧nput type=file 選擇圖片并且實(shí)現(xiàn)預(yù)覽效果的實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10詳解webpack 入門總結(jié)和實(shí)踐(按需異步加載,css單獨(dú)打包,生成多個入口文件)
本篇文章主要介紹了webpack 入門總結(jié)和實(shí)踐(按需異步加載,css單獨(dú)打包,生成多個入口文件) ,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06數(shù)組Array進(jìn)行原型prototype擴(kuò)展后帶來的for in遍歷問題
不同的程序語言都有多種循環(huán)語句,而且功能是差不多的,當(dāng)然使用場合還是有些區(qū)別的,比如for與for in,for in比較好用,它不需要預(yù)先知道對象屬性的長度。2010-02-02簡單實(shí)現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過程解析
這篇文章主要介紹了簡單實(shí)現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10JavaScript嚴(yán)格模式禁用With語句的原因
看了很多遍JavaScript嚴(yán)格模式,其中有說“禁用With語句”今天禁不住想知道為何“嚴(yán)格模式”就容不下with語句呢,如果你也表示疑惑可以看看哦2014-10-10JavaScript的String字符串對象常用操作總結(jié)
String對象用于存儲字符串?dāng)?shù)據(jù),這里我們做了JavaScript的String字符串對象常用操作總結(jié),需要的朋友可以參考下2016-05-05