Question

我正在使用与JavaScript结合使用的PHP输出表单来创建一个下载的复合文件名。

我也实现了这篇文章：

Three Select Boxes Interacting to Yield One Result - HTML, JavaScript or jQuery

所以现在我有一个现有的多选形式：

<select id="one">
    <option value="default">Select Product</option>
    <option class="s" value="1">product1</option>
    <option class="q" value="2">product2</option>
    <option class="q" value="3">product3</option>
</select>

<select id="two">
    <option value="default">Select Version</option>
    <option class="l" value="4">product4</option>
    <option class="l" value="5">product5</option>
    <option class="c" value="6">product6</option>
</select>

<select id="three">
    <option value="default">Select OS</option>
    <option class="o" value="7">product7</option>
    <option class="o" value="8">product8</option>
    <option class="o" value="9">product9</option>
</select>

<select id="three">
    <option value="default">Select Architecture</option>
    <option class="a" value="10">product10</option>
    <option class="a" value="11">product11</option>
    <option class="a" value="12">product12</option>
</select>

单击该按钮时，它会连接字符串并创建一个下载安装程序的URL。这样可以正常工作，并且在大多数情况下会产生一个有效的文件供下载。

但有几个选项无效。我为这篇文章添加了上面的类，因为很明显它们在相应的组中。

现在，问题是，如何获得现有表格的级联效果？我正在使用的PHP和JavaScript是：

从PHP文件：

$output .=  '<div><p class="download-button"><a id="viewer-dl"';
$output .=  ' onclick="download_file(document.getElementById(';
$output .=  "'" . $product_id . "'" . ').value, document.getElementById(';
$output .=  "'" . $version_id . "'" . ').value, document.getElementById(';
$output .=  "'" . $os_id      . "'" . ').value, document.getElementById(';
$output .=  "'" . $arch_id    . "'" . ')"></a></p></div>';

来自JavaScript文件：

$(function() {
    $("#viewer-dl").click(function() {
        download_viewer( $('#product_id').val(), $('#version_id').val(), 
            $('#os_id').val(), $('#arch_id').val());
    });
});

function download_file(version_id, os_id, arch_id) {

    if (product_id == 'default' && version_id == 'default' && 
        os_id == 'default' && arch_id == 'default') {
        return;
    }

    else if (product_id != 'default') {
        window.location = 'mysite.com/download/Install_' +
            product_id + '_' + version_id + '_' + arch_id + '.exe';
    }
}

我要做的是当选择s类时，我希望为下一个选择选择l和c类，但是{{1}选择了class，我只想选择q类。操作系统，架构选择我想在那里进行所有选择，因此这些类的相同。

Answer 1

我为JSFiddle创建了一个小型演示：http://jsfiddle.net/nx6yF/

基本上我做了什么，我隐藏了所有其他选择，但首先，如果首先选择更改，你必须检查选择并显示第二个选择

$("#one").change(function() {
        var val = $(this).val();
        if (val != "default") {
            $("#two").show();
        }
});

您还需要决定在第二个选择中显示哪些选项。也许课程不是最实际的处理方法，但它可能是这样的：

 var is_q = $("#one > option[value="+val+"]").hasClass("q");
 $("#two > option").each(function() {
      if (!$(this).hasClass("c") && $(this).val() != "default") {
          if (is_q) {
              $(this).attr("disabled",true);
          }
          else{
              $(this).attr("disabled",false);
          }
      }
 });

我在这里使用禁用选项，但也可以隐藏它们。无论如何，如果选择了禁用/隐藏选择，也应该更改为默认选项，以便使表单能够正确地使用多个选择

在此之后，您可以检查是否选择了选择2，然后显示选择三。当然，有些选择具有默认值，那么下一步选择应该被隐藏。

我不确定是否有任何简单的答案，如何创建级联效果 - 只需要编码即可。

Answer 2

我使用列表而不是选择创建了一个演示：http://jsfiddle.net/MQ3u3/5/

<ul id="parents"></ul>
<ul id="children"></ul>
<div id="bucket"></div>


var data = [{
    "id": 1,
        "name": "Item1",
        "children": [{
        "id": 1,
            "name": "child one"
    }, {
        "id": 2,
            "name": "child two"
    }]
}, {
    "id": 2,
        "name": "Item2",
        "children": [{
        "id": 1,
            "name": "child three"
    }, {
        "id": 2,
            "name": "child four"
    }]
}, {
    "id": 3,
        "name": "Item3",
        "children": [{
        "id": 1,
            "name": "child five"
    }, {
        "id": 2,
            "name": "child six"
    }]
}];
$(function () {
    for (var i = 0; i < data.length; i++) {
        createParentItem(i);
    }
    $('li.parent').on('click', function () {
        $('#children li').remove();
        var parentId = $(this).attr('data-id');

        for (var i1 = 0; i1 < data.length; i1++) {
            if (parentId == data[i1].id) {
                for (var i2 = 0; i2 < data[i1].children.length; i2++) {
                    createChildItem(i1, i2);
                }
            }
        }
        $('li.child').off();
        $('li.child').on('click', function () {
            var parentId = $(this).attr('parent-data-id');
            var childId = $(this).attr('child-data-id');
            for (var i1 = 0; i1 < data.length; i1++) {
                if (parentId == data[i1].id) {
                    for (var i2 = 0; i2 < data[i1].children.length; i2++) {

                        if (childId == data[i1].children[i2].id) {
                            addToBucket(i1, i2);
                        }
                    }
                }
            }
        });
    });
});
function createParentItem(index) {
    var li = $('<li>', {
        class: 'parent',
            "data-id": data[index].id,
        text: data[index].name
    });
    $('ul#parents').append(li);
}
function createChildItem(pIndex, cIndex) {
    var li = $('<li>', {
        class: 'child',
            "parent-data-id": data[pIndex].id,
            "child-data-id": data[pIndex].children[cIndex].id,
        text: data[pIndex].children[cIndex].name
    });
    $('ul#children').append(li);
}
function addToBucket(pIndex, cIndex) {
    var child = data[pIndex].children[cIndex];
    var childElm = $('<span>', {
        text: child.name + ' '
    });
    $('#bucket').append(childElm);
}

使用现有多选表单进行级联选择

2 个答案: