Question

我正在尝试以独特的方式创建多个依赖下拉列表（选择）。我想限制选择器的使用，并希望通过在所有SELECT s上使用单个类选择器来实现这一点;通过弄清楚其索引所改变的SELECT。因此，更改的SELECT[i]将仅更改SELECT[i+1]（而不是之前的SELECT[i-1]）。

对于像这样的HTML：

<select class="someclass">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<select class="someclass">
</select>

<select class="someclass">          
</select>

除第一个之外的SELECT将通过AJAX得到一些东西。

我看到以下Javascript为我提供了正确SELECT的正确值，而i的值也对应于正确的SELECT。

$(function() {
    $(".someclass").each(function(i) {
        $(this).change(function(x) {
            alert($(this).val() + i);
        });
    });         
});

请注意，我真的想要最小选择器方法。我无法解决如何处理这个问题。我应该使用数组吗？就像首先在数组中存储所有SELECTS然后选择那些？

我相信由于上面的代码已经传递了索引i，所以应该有一种没有数组的方法。

非常感谢。 AJ

更新：

这里有一些更好的描述：

页面上有超过2个`SELECT`s，类为`someclass`。 SELECT [0]最初有一些值，它的后继者是空的，因为它们会根据它们各自的直接祖先的值而改变。
如果`SELECT [i]`有变化，它会触发一个事件，并且'SELECT [i + 1]`填充了适当的`OPTION`s。
`SELECT [i + 2]`如果之前有任何数据，则重置其他后继。因此，只有直接子项被填充，但重置了其他继承者。

我希望我表达得很好。如果您需要更多关于我想要的内容，请告诉我。

Answer 1

在change()内，您可以使用eq()功能获取下一个选择元素。

$('.someclass').eq(i + 1);

或者（我认为更好），你也可以使用next()函数。

$(this).next('.someclass');

Answer 2

编辑：更正版本。

$(function() {
    var $all = $('.someclass');              // Reference all the selects
    var last = $('.someClass').length - 1;   // Store index of last select

     $(".someclass").change(function() {

        var $th = $(this);           // Reference the changed select

        var index = $all.index($th);     // Grab the index of the changed select

        if(index != last) {              // If the selected wasn't the last,

            var $next = $all.eq(index + 1)      // reference the next select

            $all.filter(':gt(' + index + ')').empty(); // and empty all selects greater than the 
                                                       // index of the changed one.
                                                       // This will include the one that is about
                                                       //     to be populated.
                // Then presumably perform some AJAX
                //    based on $th.val(); to populate
                //    $next with options.
         }
    });         
});

单一类别（没有其他选择器）的相关下拉列表（链接选择）

2 个答案: