Select標(biāo)簽下拉列表二級聯(lián)動級聯(lián)實例代碼
更新時間:2014年02月07日 14:48:19 作者:
這篇文章主要介紹了Select標(biāo)簽下拉列表二級聯(lián)動級聯(lián)實例代碼,需要的朋友可以參考下
首先從服務(wù)器端,綁定下拉列表,二級下拉的text命名按照一定規(guī)則加上一級下拉的ID。
var options=new Array();
$(document).ready(function(){
//二級聯(lián)動
$('#ddlPages').children('option').each(function(i){
options[i]='<option value="'+$(this).val()+'">'+$(this).text()+'</option>';
});//將option列表放到數(shù)組里
$('#ddlPages option:gt(0)').remove(); //清楚下拉
$('#ddlSubsystems').bind('change',function(){ //注冊事件
var systemname=$('#ddlSubsystems option:selected').text();
for(var j=0;j<options.length;j++){
$('#ddlPages').append(options[j]);
} //option列表先初始化
$('#ddlPages option:gt(0)').each(function(i){ //遍歷排除
var textname=$(this).text();
var index=textname.indexOf('-'+systemname);
if(index<0){
$(this).remove();
}else{
$(this).text(textname.substring(0,index));
}
});
$('#ddlPages').val(0); //默認(rèn)選中第一行
});
});
復(fù)制代碼 代碼如下:
var options=new Array();
$(document).ready(function(){
//二級聯(lián)動
$('#ddlPages').children('option').each(function(i){
options[i]='<option value="'+$(this).val()+'">'+$(this).text()+'</option>';
});//將option列表放到數(shù)組里
$('#ddlPages option:gt(0)').remove(); //清楚下拉
$('#ddlSubsystems').bind('change',function(){ //注冊事件
var systemname=$('#ddlSubsystems option:selected').text();
for(var j=0;j<options.length;j++){
$('#ddlPages').append(options[j]);
} //option列表先初始化
$('#ddlPages option:gt(0)').each(function(i){ //遍歷排除
var textname=$(this).text();
var index=textname.indexOf('-'+systemname);
if(index<0){
$(this).remove();
}else{
$(this).text(textname.substring(0,index));
}
});
$('#ddlPages').val(0); //默認(rèn)選中第一行
});
});
相關(guān)文章
JavaScript實現(xiàn)復(fù)制功能各瀏覽器支持情況實測
這兩天在做Web前端時,遇到需求通過js實現(xiàn)文本復(fù)制的功能,下面與大家分享下各瀏覽器對復(fù)制功能的支持情況,感興趣的朋友可以參考下哈2013-07-07Bootstrap組件學(xué)習(xí)之導(dǎo)航、標(biāo)簽、面包屑導(dǎo)航(精品)
這篇文章主要介紹了Bootstrap組件學(xué)習(xí)之導(dǎo)航、標(biāo)簽、面包屑導(dǎo)航(精品)的相關(guān)資料,需要的朋友可以參考下2016-05-05一個網(wǎng)頁標(biāo)題title的閃動提示效果實現(xiàn)思路
通過網(wǎng)頁title來提示用戶有新消息這個功能很常見,下面有個不錯的示例,大家可以參考下2014-03-03