使用JavaScript深入选择选项

Question

我开始构建“向下钻取”选择元素（根据您选择的先前选项选择过滤其选项的元素。

由于我之前从未这样做过，我正在寻找一种针对这种常见情况的“最佳实践”方法。你能指点我一个教程，或者提供一些示例代码来说明我应该如何处理它？<​​/ p>

解决方案

我最初想过隐藏和显示选项，但事实证明这种方法不是跨浏览器兼容的。我遇到的最简单的跨浏览器方法是创建原始选择选项的副本，并在用户进行选择后替换选项。我写了一个小jQuery插件，使它更具可重用性。

<select id="first">
    <option value="1">Fruits</option>
    <option value="2">Vegetables</option>

</select>
<select id="second">
    <option> -- Select -- </option>
    <!-- class is in the format of "parentId_parentValue" -->
    <option class="first_1" value="1">Apple</option>
    <option class="first_1" value="2">Orange</option>
    <option class="first_1" value="3">Banana</option>
    <option class="first_2" value="4">Carrot</option>
    <option class="first_2" value="5">Broccoli</option>
    <option class="first_2" value="6">Spinach</option>
</select>

<script type="text/javascript">
$.fn.drilldown = function(child) {
    var $parent = this;
    var parentId = $parent.attr('id');
    var $child = $(child);
    var childId = $child.attr('id');
    var optionIdentifier = '.' + parentId + '_';
    var selectedChildOption = $child.val();
    var $childCopy = $('<select id='+parentId+childId+' />');

    $childCopy.html($child.find('option')).hide().appendTo('body');

    var refreshOptions = function(){
        var selectedParentValue = $parent.val();
        $child.html($childCopy.find(optionIdentifier+selectedParentValue).clone());
        $child.prepend('<option value="0" selected="selected"> -- Select -- </option>');
    };

    refreshOptions();
    $child.val(selectedChildOption);

    $parent.change(function(){
        refreshOptions();
        $child.trigger('change').focus();
    });
};

$(document).ready(function(){
    $('#first').drilldown('#second');
});
</script>

这是jsFiddle，表明它有效。

Answer 1

如果你可以使用jQuery，那么有一个很好的插件： http://www.ajaxray.com/Examples/depend.html

它基本上使用类来定义层次结构，例如父选择选项1的值为abc，属于父选择的子选择选项将具有类sub_abc。

美好而简单！当然，有很多方法可以做到这一点，这似乎是一条非常简单的路线。

Answer 2

我可能会这样做：

$(document).ready(function(){
    var sv = [['apples', 'oranges'],['honda', 'plymouth']];

    $('#category').change(function(){
        $('#subcat option').remove();

        var a = sv[$('#category option:selected').val()];
        for(var n = 0; n < a.length; ++n)
        {
            $('#subcat').append($('<option></option>')
                                .attr('value', n)
                                .text(a[n]));
        }
    });
});

<强> Fiddle here

我只会为小型数据集执行此操作。如果您要切换大量数据（即处理地理数据集），我很可能会通过.ajax()

获取数据