doulongsi1831 2014-08-14 06:29
浏览 270
已采纳

如何创建n级(多级,级联)依赖下拉列表(选择,选项)?

Purpose: To find the easiest and more flexible way creating cascading dropdown lists, using tools jquery(javascript), php, mysql;

If you have other easier/flexible options then please, share it.

  • 写回答

1条回答 默认 最新

  • doudu9094 2014-08-14 06:29
    关注

    HTML

    <select class="step1 step" name="step1"></select>
    <select class="step2 step" name="step2"></select>
    <select class="step3 step" name="step3"></select>
    <select class="step4 step" name="step4"></select>
    <select class="step5 step" name="step5"></select>
    

    For information purposes, usually on last dropdown is selected:

    <textarea id="info" disabled=""></textarea>
    

    JQUERY

    $.get(url, function(data){
        var options = function(data, level, selected) {
            $.each(data, function(i, item) {
                var pid = $('.step'+(level-1)).val();
    
                if(pid == item.pid || item.pid == 0) {
                    if(!$('.step').find('option[value='+item.id+']').length) {
                        $('.step'+level).append($('<option>', {
                            value: item.id,
                            text : item.name,
                            info: item.info,
                        }));
                    }
    
                    if(item.childs)
                        options(item.childs, level+1);
                }
            });
    
            var info = $('.step option:selected:last').attr('info');
            $('#info').val(info);
        }
        options(data, 1);
    
        $('.step').change(function() {
            var selected = $(this).val();
            $(this).nextAll('.step').empty();
    
            options(data, 1);
        });
    });
    

    JSON

    {"1":{"id":"1","name":"Category-1","info":"","pid":"0","childs":{"3":{"id":"3","name":"Category-1-2","info":"","pid":"1","childs":{"19":{"id":"19","name":"Captiva","info":"Some text","pid":"3"}}}}}}
    

    and so on ...

    PHP

    foreach ($info as $key => $value) {
        $info[$value->id] = $value;
        unset($info[0]);
    }
    
    foreach($info as $key => $val)
        $childs[$val->pid][$key] = $val;
    
    foreach($info as $item)
        if (isset($childs[$item->id]))
            $item->childs = $childs[$item->id];
    
    $total = count($info);
    foreach($info as $key => $val){
        if($info[$key]->pid != 0)
            unset($info[$key]);
    }
    

    MYSQL

    CREATE TABLE IF NOT EXISTS `dropdown_list` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `name` varchar(255) NOT NULL,
      `info` varchar(1000) NOT NULL,
      `pid` int(11) NOT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择