国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

使用 p 模擬 option

<script>
        var New_add_select = function(){};
        /**
         * 打印父類下拉框
         */
        New_add_select.prototype.repeat_first_category = function(argument){
            var first_category = '',
                len = argument.length;
            for(var i = 0;i<len;i++){
            first_category += "<option value = '"+argument[i].id+"'>"+argument[i].name+"</option>";
            }
            return first_category; 
        };
        /**
         * 打印子類下拉框
         */
        New_add_select.prototype.get_second_category = function(id,argument){
            var len = argument.length,
                arr = [];
            for(var i = 0;i<len;i++){
            if(Number(id) === Number(argument[i].portType)){
                arr.push(argument[i]);
            }
            }
            return arr; 
        };
        New_add_select.prototype.repeat_second_category = function(argument){
            var second_category = '',
                len = argument.length;
            if(len>0){
            $('.second_select').css('display', 'block');
            }else {
            $('.second_select').css('display', 'none');
            }
            for(var i = 0;i<len;i++){
                second_category += "<option value = '"+argument[i].label+"'>"+argument[i].name+"</option>";
            }
            return second_category;
        };

        var new_add_methods = new New_add_select();

         /**
         * 獲取分類方法
         */
        function get_category(){
            $.ajax({
            url: '/api/categories',//示例后端數(shù)據(jù)接口
            type: 'POST',
            })
            .done(function(data) {
                $('#first_select').html(new_add_methods.repeat_first_category(data.port_type));//打印一級菜單的數(shù)據(jù)
                /**
                 * 父類change方法
                 */
                $('#first_select').on('change',function(){
                    var select_id = $('#first_select option:selected').val();//獲取選中的值的id
                    $('#second_select').html(new_add_methods.repeat_second_category(new_add_methods.get_second_category(select_id,data.categories)));//根據(jù)選中的值的id 獲取二級菜單的數(shù)據(jù)
                });
            })
            .fail(function(data) {
                console.log(data);
            });
        }
        /**
         * 初始化方法
         */
        get_category();

貼代碼 具體的數(shù)據(jù)結(jié)構(gòu)我這邊找不到了 反正就是更具id 通過ajax取數(shù)據(jù)而已 很簡單

思路不難，最關(guān)鍵的是監(jiān)聽第一級列表的變化(這里可以監(jiān)聽列表的點擊事件)，然后動態(tài)改變第二級列表的內(nèi)容即可(如果不復雜直接用字符串拼接，反之用模板引擎)。至于內(nèi)容數(shù)據(jù)可以事先全部獲取也可以按需獲取。

他這個要有一個合理的json格式，比如下面。也可以是嵌套的，反正會有一個解析的規(guī)律，然后就是渲染你的數(shù)據(jù)了。和渲染一個table沒什么區(qū)別。如果不考慮兼容可以使用屬性選擇器去完成，超級快。

{
    1：中國
    10：河北,
    10+：的全都是河北里面的
    20：北京
    30：上海
}

一級省份生成數(shù)據(jù)：
js獲取用戶點擊一級省份的值(#province)：

 $("#province").change(function(){
    var proVal=$("#select_id").val();
    $.post(uri,{'province':proVal},function(res){ 
        //后端返回對應省份的二級數(shù)據(jù)，將數(shù)據(jù)動態(tài)加載到select
    })
});

大致這樣，上面有個大胸弟寫的很清楚了。