超簡(jiǎn)單JS二級(jí)、多級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)例
更新時(shí)間：2014年02月18日 09:04:31 作者：
本篇文章主要是對(duì)超簡(jiǎn)單JS二級(jí)、多級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
超簡(jiǎn)單的JS聯(lián)動(dòng)代碼，不過要配合jquery用,也可以自己修改為不用任選JS庫(kù)的代碼
<tr>
<th>一級(jí)分類</th><td>
<select name="subsidiary_cat_id" class="subsidiary_cat_id" onchange="linkage('.subsidiary_cat_id','.cat_id');">
<option>請(qǐng)選擇</option>
</select>
<script language="javascript">
var linkage_data={$list_file_category};//初始化級(jí)聯(lián)數(shù)據(jù)，{$list_file_category}是PHP的JSON_ENCODE的數(shù)據(jù)，數(shù)組有3個(gè)數(shù)據(jù)，id,parent_id,name
function linkage(parent_dom,son_dom){
var parent_id=0;
if(parent_dom){
parent_id=$(parent_dom).val();
}
$(son_dom).empty();//先清空下拉
var html='<option>請(qǐng)選擇</option>';
$.each(linkage_data,function(key,value){
if(value.parent_id==parent_id){
html+="<option value='"+value.id+"'>"+value.name+"</option>";
}
});
$(son_dom).append(html);
}
linkage('',".subsidiary_cat_id")//不傳上級(jí)節(jié)點(diǎn)，表示為第一級(jí)數(shù)據(jù)
</script>
</td></tr>
<tr><th>二級(jí)目錄</th><td>
<select name="cat_id" class="cat_id">
<option>請(qǐng)選擇</option>
</select></td></tr>
復(fù)制代碼 代碼如下:
<tr>
<th>一級(jí)分類</th><td>
<select name="subsidiary_cat_id" class="subsidiary_cat_id" onchange="linkage('.subsidiary_cat_id','.cat_id');">
<option>請(qǐng)選擇</option>
</select>
<script language="javascript">
var linkage_data={$list_file_category};//初始化級(jí)聯(lián)數(shù)據(jù)，{$list_file_category}是PHP的JSON_ENCODE的數(shù)據(jù)，數(shù)組有3個(gè)數(shù)據(jù)，id,parent_id,name
function linkage(parent_dom,son_dom){
var parent_id=0;
if(parent_dom){
parent_id=$(parent_dom).val();
}
$(son_dom).empty();//先清空下拉
var html='<option>請(qǐng)選擇</option>';
$.each(linkage_data,function(key,value){
if(value.parent_id==parent_id){
html+="<option value='"+value.id+"'>"+value.name+"</option>";
}
});
$(son_dom).append(html);
}
linkage('',".subsidiary_cat_id")//不傳上級(jí)節(jié)點(diǎn)，表示為第一級(jí)數(shù)據(jù)
</script>
</td></tr>
<tr><th>二級(jí)目錄</th><td>
<select name="cat_id" class="cat_id">
<option>請(qǐng)選擇</option>
</select></td></tr>
相關(guān)文章
光標(biāo)的帖子總結(jié)（Range的使用）...2006-07-07
微信小程序—setTimeOut定時(shí)器的問題及解決
這篇文章主要介紹了微信小程序—setTimeOut定時(shí)器的問題及解決,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)日期計(jì)算器功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
js中異步函數(shù)async function變同步函數(shù)的簡(jiǎn)單入門
這篇文章主要介紹了js中異步函數(shù)async function變同步函數(shù)的簡(jiǎn)單入門，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
網(wǎng)站注冊(cè)的時(shí)候經(jīng)?？梢钥吹矫艽a強(qiáng)度提示，今天自己做了一個(gè)JS密碼強(qiáng)度判斷，具體實(shí)現(xiàn)如下，喜歡的朋友可以學(xué)習(xí)下2013-09-09
本文主要介紹了JS實(shí)現(xiàn)頁(yè)面打印功能的方法，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
window.location.href和window.open窗口跳轉(zhuǎn)區(qū)別解析
這篇文章主要為大家介紹了window.location.href和window.open 跳轉(zhuǎn)區(qū)別解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
javascript簡(jiǎn)單寫的判斷電話號(hào)碼實(shí)例
這篇文章主要介紹了javascript簡(jiǎn)單寫的判斷電話號(hào)碼實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05
JS+canvas五子棋人機(jī)對(duì)戰(zhàn)實(shí)現(xiàn)步驟詳解
這篇文章主要介紹了JS+canvas五子棋人機(jī)對(duì)戰(zhàn)實(shí)現(xiàn)步驟詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了微信小程序中的上拉、下拉菜單功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03