0

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

我也实施了这篇文章：

三个选择框交互产生一个结果 - HTML、JavaScript 或 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';
    }
}

What I'm trying to do is when the sclass is selected, I want the the land cclasses selected for the next selection, but when the qclass is selected, I only want the cclass selected. 操作系统，架构选择我希望所有选择都在那里，因此这些类是相同的。

4

2 回答 2

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);
          }
      }
 });

我在这里使用了禁用选项，但也可以隐藏它们。无论如何，如果选中，禁用/隐藏的选择也应更改为默认值，以使表单在多个选择中正常工作

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

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

于 2012-12-13T20:10:03.673 回答
0

我使用列表而不是选择创建了一个演示：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);
}
于 2014-07-18T15:12:04.320 回答