Question

我有3个不同的<section>个不同的块。您只能在第一个区块<option>之后选择第二个。以及第三，只有选择了<option>来自第二个。

第一个框的更改工作正常。但是在第二个方框中，一切都只适用于第三个区块中的第一个<section>。

我正在试图弄清楚原因，因为两个盒子的功能非常相似，我自己的调试还没有给我带来胜利。

 $(document).ready(function () {

    var sel2 = '#sel2';
    var sel3 = '#sel3';

    $('#sel1').change(function () {
        var selected = $('#sel1 option:selected').attr('id');
        var target = "#sel2_";
        var sel2New = target + (selected.substr(selected.length-1, 1));

        $(sel2New).show();
        $(sel2).hide();
        sel2 = sel2New;

    });

    $('.sel2').change(function () {
        var selectedMid = $(this).attr('id');
        var target_Middle = (selectedMid.substr(selectedMid.length-1, 1));
        var selected = $(this).find(":selected").attr('id');
        var target = (selected.substr(selected.length-1, 1));
        var sel3New = "#sel3_" + target_Middle + '_' + target ;

        $(sel3New).show();
        $(sel3).hide();
        sel3 = sel3New;
    });

});

Answer 1

您的某些第三级列表未显示的原因是由于ID不匹配。

例如，以下声明是正确的：

<select id="sel3_1_2">

以下内容不正确：

<select id="sel_3_1_3">

请注意 sel 和 3 之间的额外下划线。如果您在代码中找到 sel _ 替换为 sel ，我相信一切都应该按照您的预期开始工作。

Answer 2

这是因为第3个区块中某些选项的ID以sel_3*开头，而您在javascript中尝试访问sel3*。

Answer 3

你真的需要重构你的代码！

＆＃13;

var myList = [{
    value: 'A',
    title: 'Value A',
    children: [{
        value: 'a',
        title: 'Small value A',
        children: [
            { value: '1', title: 'Value 1' },
            { value: '2', title: 'Value 2' },
            { value: '3', title: 'Value 3' }
        ]
    },{
        value: 'b',
        title: 'Small value B',
        children: [
            { value: '4', title: 'Value 4' },
            { value: '5', title: 'Value 5' },
            { value: '6', title: 'Value 6' }
        ]
    }]
},{
    value: 'B',
    title: 'Value B',
    children: [{
        value: 'c',
        title: 'Small value C',
        children: [
            { value: '7', title: 'Value 7' },
            { value: '8', title: 'Value 8' },
            { value: '9', title: 'Value 9' }
        ]
    },{
        value: 'd',
        title: 'Small value D',
        children: [
            { value: '10', title: 'Value 10' },
            { value: '11', title: 'Value 11' },
            { value: '12', title: 'Value 12' }
        ]
    }]
}];

function createSelect($parent, list) {
    var $select = $('<select>');
    
    if ($parent.is('select')) {
        $select.insertAfter($parent);
    } else {
        $select.appendTo($parent);
    }
    
    $.each(list, function() {
        $('<option>')
            .data('children', this.children)
            .attr('value', this.value)
            .text(this.title || this.value)
            .appendTo($select);
    });
    
    $select.on('change', function() {
        var $self = $(this);
        var childList = $self.children('option:selected').data('children');
        $self.nextAll().remove();
        if (!childList) return;
        createSelect($self, childList);
    });
    
    $select.trigger('change');
}

function addNone(list) {
    list.unshift({ value: '-' });
    $.each(list, function() {
        if (!this.children) return;
        addNone(this.children);
    });
}

addNone(myList);

createSelect($('#selectGroup'), myList);

＆＃13;

select {
    margin: 5px 0;
    border-radius: 7px;
    background: #5a5772;
    color:#fff;
    border:none;
    outline:none;
    cursor:pointer;
    width: 203px;
    height: 50px;
    box-sizing: border-box;
    display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectGroup"></div>

＆＃13;

具有奇怪行为的jQuery中的.hide（）和.show（）

3 个答案: