作者mesak (米沙)
看板Ajax
标题Re: [问题] 不知道层数的下拉选单
时间Mon Oct 11 13:39:15 2010
有点丑，加减看
(function($) {
$.fn.test = function(options) {
options = $.extend({
post: "json.php",
parent: ''
}, options);
var element = $(this);
$('select[id^="sel"]').live('change',function(){
select_id(this.value,this.id);
})
function select_id(id,parent){
var parent = parent.replace('sel_','');
if($('select[id^="sel_'+parent+'_"]').size() > 0){
$('select[id^="sel_'+parent+'_"]').remove()
}
$.post(options.post , {'id':id}, function(data){
var list = $.parseJSON(data);
var option='';
$.each(list, function(key,val){
option += '<option value="'+key+'" >'+val+'</option>';
});
var sel = '<select id="sel_'+parent+'_'+id+'"><option value="">未选择
</option>'+option+'</select>';
element.html( element.html() + sel);
});
}
}
})(jQuery);
<script type="text/javascript">
$(document).ready(function(){
$("#select").test({parent:$('#sel')});
})
</script>
<body>
<select id="sel_parent"><option value="">未选择</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select><div id="select"></div>
</body>
说明一下
父层的id是 sel_parent
子层的id是 sel_parent_A
sel_parent_B
A子层的id是 sel_parent_A_A1
sel_parent_A_A2
当任何父层变动的时候，移除掉其他子层
$('select[id^="sel_'+parent+'_"]').remove()
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 112.105.244.175
1F：→ mesak:版上的大大应该有更好的解法 10/11 13:39
2F：→ knives:找看看有没有人家写好的jQuery Plugin 10/11 13:45
※ 编辑: mesak 来自: 112.105.244.175 (10/11 13:52)