Question

我有一系列以编程方式添加的选择框。他们的名字是“阵列式的”（见下文）。

<select name="blah[]">
    <option value="A">A</option>
    <option value="B">B</option>
</select>
<select name="blah[]">
    <option value="A">A</option>
    <option value="B">B</option>
</select>
<!-- and more... -->

当添加每个时，我想添加一个onChange来检查它的选择。如果选择值为“A”，则所有blah[]选择以上，它将被设置为“A”。如果选择值为“B”，则所有blah[]选择以下将设置为“B”。

除了通过编程方式添加字段（“blah1”，“blah2”等等）手动设置名称外，还有关于如何执行此操作的任何想法？ jQuery能以某种方式得到每个元素的索引吗？

谢谢！

Answer 1

.index()应该做的伎俩

$('select').live('change', function() {
    var index = $('select').index(this);
    $('select').each(function(i) {
        if ( i < index ) {
            // do something to ones above
        }
        else ( i > index ) {
            // do something to ones below
        }
    });
});

Answer 2

如果你想选择其他选择项，假设它们在DOM中处于同一级别，你可以使用jQuery的.nextAll（）/ prevAll（）遍历方法。

假设父div的id为“SelectContainer”，则以下内容应该有效：

<强>更新

抱歉没有准备好，已经更新了你要求的事情:)。

$('#SelectContainer').delegate('select', 'change', function() {
  var select = $(this),
      selectedValue = select.val(),
      otherSelects = select[selectedValue === 'A' ? 'prevAll' : 'nextAll']('select'),
      selectedIndex = select.children(':selected').index();

  otherSelects.val(selectedValue);
});

运行示例：http://jsbin.com/ofodac/2/edit

我在变量中放置了诸如selectedValue之类的东西，以便更容易理解，但为了使它更简洁，你可以轻松减少变量的数量。

Answer 3

试试这个：http://jsfiddle.net/shaneburgess/zdbC3/

<select name="blah[]" class="select">
    <option value="A">A</option>
    <option value="B">B</option>
</select>
<select name="blah[]" class="select">
    <option value="A">A</option>
    <option value="B">B</option>
</select>

<select name="blah[]" class="select">
    <option value="A">A</option>
    <option value="B">B</option>
</select>

<select name="blah[]" class="select">
    <option value="A">A</option>
    <option value="B">B</option>
</select>
<!-- and more... -->

JS：

$('.select').change(function(){
    var mainIndex = 0;
     mainIndex = $(this).index();
    if($(this).val() == 'B'){


        $.each($('.select'),function(){

            if($(this).index() > mainIndex){
                $(this).val('B');
            }
        });
    }else{
        $.each($('.select'),function(){

            if($(this).index() < mainIndex){
                $(this).val('A');
            }
        });
    }
});

是否可以使用jQuery获取HTML元素数组项的索引？

3 个答案: