1 
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>

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

Here is my jQuery I use to remove a value from the child when a value in the parent is selected:

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

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

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

4

3 回答 3

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 Fiddle：http: //jsfiddle.net/KkNHr/1/

于 2012-12-17T07:44:46.297 回答
0

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

child.get(0).selectedIndex = 1;
于 2012-12-17T07:43:26.877 回答
0

请参阅参考：http: //jsfiddle.net/YqGU8/

$(".from").change(function() {
 var val = $(this).find(":selected").val();
 $(".to option[value='" + val + "']").remove();
 $(".to option:last").attr('selected','selected');
});​
于 2012-12-17T07:43:47.747 回答