Question

child.attr('selectedIndex', 1);

似乎在我的情况下不起作用。

我有两个级联下拉列表，父母和孩子。首先，它们都包含相同的值。当用户从父选择框中选择一个项目时，它将作为子选择中的一个选项被删除。

有时，父选择框只有3个项目，默认值和2个值。当用户在这种情况下选择父值时，子选择中唯一可能的选择是剩余的非默认值。

因此，当父级只有两个值时，我想自动选择当用户选择父级选择时在子框中留下的非默认值。

我开始使用的HTML可能如下：

<select name="from" class="from">
<option value="" selected="selected" class="default">Select a value</option>
<option value="na">One</option>
<option value="ja">Two</option>
</select>
<select name="to" class="to">
<option value="" selected="selected" class="default">Select a value</option>
<option value="na">One</option>
<option value="ja">Two</option>
</select>

然后，如果用户在父母中选择“一个”，则子选择应自动选择“两个”。

这是我的jQuery，用于在选择父级中的值时从子级中删除值：

    (function ($) {
        function cascadeSelect(parent, child) {
            var childOptions = child.find('option:not(.default)');
            child.data('options', childOptions);
            parent.change(function () {
                childOptions.remove();
                child.append(child.data('options').filter('.' + this.value))
                    .change();
                if (child.data('options').length == 2) {
                    [select the last option here]
                }

            })

            if (parent.val()) {
                childOptions.not('.default, .' + parent.val()).remove();
            }

        }


        $(function () {
            cascadeForm = $('.askform');
            pulldown_from = cascadeForm.find('.from');
            pulldown_to = cascadeForm.find('.to');

            cascadeSelect(pulldown_from, pulldown_to);
        });

我添加了一行来检查子选择中是否只有两个选项：

                if (child.data('options').length == 2) {
                    [select the non-default child option here]
                }

但我无法弄清楚如何选择非默认子选项。我以为我可以使用.selectedIndex：

来做到这一点

child.attr('selectedIndex', 1);

但是这似乎引用了原始索引值（在删除父项中选择的值之前的索引）。

那么当父母中只有两个选项可供选择时，如何在子选择中自动选择唯一的非默认选项？

Answer 1

我想我发现了一些问题。

在这一行：

child.append(child.data('options').filter('.' + this.value))
             .change();

看起来你正在尝试使用类的选择器（而不是值）进行过滤。您希望能够通过更改选择器来解决此问题，以便根据选项的值进行过滤：

child.append(child.data('options').filter('[value="' + this.value + '"]'))
             .change();

在下拉列表中选择值的最简单方法是使用val()。换句话说，你所读的那一行应该是：

child.val(this.value);

如果你想看到整个事情有效，我创建了一个JS小提琴：http://jsfiddle.net/KkNHr/1/

Answer 2

这似乎有用......但为什么不使用attr？

child.get(0).selectedIndex = 1;

Answer 3

参见参考：http://jsfiddle.net/YqGU8/

$(".from").change(function() {
 var val = $(this).find(":selected").val();
 $(".to option[value='" + val + "']").remove();
 $(".to option:last").attr('selected','selected');
});

jQuery：动态设置选择选项

3 个答案: