超簡單JS二級、多級聯(lián)動的簡單實例
更新時間：2014年02月18日 09:04:31 作者：
本篇文章主要是對超簡單JS二級、多級聯(lián)動的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
超簡單的JS聯(lián)動代碼，不過要配合jquery用,也可以自己修改為不用任選JS庫的代碼
<tr>
<th>一級分類</th><td>
<select name="subsidiary_cat_id" class="subsidiary_cat_id" onchange="linkage('.subsidiary_cat_id','.cat_id');">
<option>請選擇</option>
</select>
<script language="javascript">
var linkage_data={$list_file_category};//初始化級聯(lián)數(shù)據(jù)，{$list_file_category}是PHP的JSON_ENCODE的數(shù)據(jù)，數(shù)組有3個數(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>請選擇</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")//不傳上級節(jié)點，表示為第一級數(shù)據(jù)
</script>
</td></tr>
<tr><th>二級目錄</th><td>
<select name="cat_id" class="cat_id">
<option>請選擇</option>
</select></td></tr>
復制代碼 代碼如下:
<tr>
<th>一級分類</th><td>
<select name="subsidiary_cat_id" class="subsidiary_cat_id" onchange="linkage('.subsidiary_cat_id','.cat_id');">
<option>請選擇</option>
</select>
<script language="javascript">
var linkage_data={$list_file_category};//初始化級聯(lián)數(shù)據(jù)，{$list_file_category}是PHP的JSON_ENCODE的數(shù)據(jù)，數(shù)組有3個數(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>請選擇</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")//不傳上級節(jié)點，表示為第一級數(shù)據(jù)
</script>
</td></tr>
<tr><th>二級目錄</th><td>
<select name="cat_id" class="cat_id">
<option>請選擇</option>
</select></td></tr>
相關(guān)文章
JavaScript修改css樣式style動態(tài)改變元素樣式
修改css樣式style在某些情況下還是比較實用的，可以動態(tài)改變一些樣式，接下來為大家介紹下使用JavaScript是如何做到的2013-12-12
這篇文章主要介紹了JS中art-template模板使用過濾器問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
下面小編就為大家?guī)硪黄獪\析$.getJSON異步請求和同步請求。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
JS對外部文件的加載及對IFRMAME的加載的實現(xiàn),當加載完成后,指定指向方法(方法回調(diào))
callback方法回調(diào)是指當某方法執(zhí)行完成后,去自動執(zhí)行指定的另一方法的過程.下面舉兩個代表性的例子,說說JS世界里的方法回調(diào).2011-07-07
這篇文章主要為大家介紹了uni-app實現(xiàn)全局水印示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
在 Vue 3 中使用 Element Plus 的 <el-menu> 組件時,默認情況下菜單項是關(guān)閉狀態(tài)的,如果你想讓某個菜單項默認處于展開狀態(tài),你可以通過設(shè)置菜單項的 default-active 屬性來實現(xiàn),這篇文章主要介紹了element-plus默認菜單打開,需要的朋友可以參考下2024-08-08
本篇文章主要是對js實現(xiàn)文本框中焦點在最后位置的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所 幫助2014-03-03
js?fill函數(shù)填充數(shù)組或?qū)ο蟮慕鉀Q方法
這篇文章主要介紹了js?fill函數(shù)填充數(shù)組或?qū)ο蟮膯栴}及解決方法，本文給大家介紹的非常詳細對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了如何使用JS console.log()技巧提高工作效率,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10
這篇文章主要介紹了Bootstrap Scrollspy源碼學習，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03