无限级别菜单下拉

html

<meta charset="utf-8">
<div class="unlimited" data="1" ajaxurl="#">
    <select class="select_1" data="" name="bank">
        <option value="">请选择</option>
        <option value="1">四川省分行</option>
    </select>
</div>

script

<script src="script/jquery-1.4.2.min.js"></script>
<script type="text/javascript">$(function () {
    unlimited_select();
});
//Unlimited Select Functions
function unlimited_select(){
     $('.unlimited').change(function () {
        var num = parseInt($(this).attr('data'));
        //找到发生改变的节点 并替换相应data值
        for (var i = 1; i <= num; i++) {
            var select_obj = $(".select_" + i);
            var change_val = select_obj.val();
            var select_val = select_obj.attr('data');
            if (change_val != select_val) {
                select_obj.attr('data', change_val); //替换data值
                var current_num = i; //找到节点
                break;
            }
        }
        //当不是最后一个节点时，移除后面的节点,并获取name属性
        if (current_num < num) {
            for (var i = current_num + 1; i <= num; i++) {
                var select_obj = $(".select_" + i);
                if (i == num) {
                    var select_name = select_obj.attr('name');
                }
                select_obj.remove();
            }
        } else { //如果是当前最后节点，直接获取name属性，并移除该属性
            var select_name = $(".select_" + num).attr('name');
            //$(".select_" + num).removeAttr('name');
        }
        //如果选中的值不为空，则ajax请求后续节点
        if (change_val == '') {
            $(this).attr('data', current_num); //替换节点数data值
            $(".select_" + current_num).attr('name', select_name);
        } else {
            var url = $(this).attr('ajaxurl');
            //do ajax... return bank_data...
            /*~~~~~~jsfiddle不方便做ajax请求操作，略过
            var bank_data = null;
   $.ajax({
url: url,
       async: false,
type: 'POST',
data:{ },
       success: function(msg){
  bank_data = $.parseJSON(msg);
              }
       });
            用下面替代~~~~~~*/
            var bank_data = {
                '4': 'AAA支行',
                '5': 'BBB支行',
                '6': 'CCC支行'
            };
            if (bank_data) { //有返回下一节点结果
                $(this).attr('data', current_num + 1);
                add_select( 'unlimited', select_name, current_num + 1, bank_data );
                $(".select_" + current_num).removeAttr('name');
            } else { //没有下一节点
                $(this).attr('data', current_num);
            }
        }
    });
}
function add_select( class_name, select_name, add_num, data){
    var new_select = '<select class="select_'+add_num+'" data="" name="'+select_name+'"><option value="">请选择</option>';
    for( key in data ){
        new_select += '<option value="'+key+'">'+data[key]+'</option>';
    }
    new_select += '</select>';
    $('.'+class_name).append(new_select);
}
</script>