超簡單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>
相關文章
js中異步函數(shù)async function變同步函數(shù)的簡單入門
這篇文章主要介紹了js中異步函數(shù)async function變同步函數(shù)的簡單入門,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04window.location.href和window.open窗口跳轉區(qū)別解析
這篇文章主要為大家介紹了window.location.href和window.open 跳轉區(qū)別解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07JS+canvas五子棋人機對戰(zhàn)實現(xiàn)步驟詳解
這篇文章主要介紹了JS+canvas五子棋人機對戰(zhàn)實現(xiàn)步驟詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06