Question

我在类中有一些选择，当任何选择发生更改事件时我想执行以下操作：搜索所有选择值的选择，发生更改事件，找到时我想要交换这两个值。

我举个例子：

<div id="l1col1" class="selects1">
    <select onChange='swap(newVal, oldVal);'>
        <option selected>3</option>
        <option>2</option>
        <option>1</option>
    </select>
</div>

<div id="l1col2" class="selects1">
    <select onChange='swap(newVal, oldVal);'>
        <option selected>2</option>
        <option>3</option>
        <option>1</option>
    </select>
</div>

<div id="l1col3" class="selects1">
    <select onChange='swap(newVal, oldVal);'>
        <option selected>1</option>
        <option>2</option>
        <option>3</option>        
    </select>
</div>

我的所有选择都没有与另一个相同的值：永远不会有1或2或3 多一次。

这是我的交换功能

function swap (x,y){    
    //alert($(x).find(":selected").text()); 
    var tt = $(x).find(":selected").text();         
    alert(tt + y);
    $('.selects2 :selected:contains("' + tt + '")').text("' + y + '");
}

问题在于，当我调用change事件时，让我们说第一个选择包含3并将其更改为1，交换功能将选择1的选项更改为3 BUT也会再次更改我更改的选项再次到3。

你可以帮我解决这个问题吗？我希望我足够清楚

Answer 1

首先，使用jQuery来附加您的事件而不是丑陋的内联处理程序。其次，您可以使用data属性来存储要比较的旧值。试试这个：

$('.selects1 select')
    .each(function() {
        var $this = $(this);
        $this.data('old-value', $this.val());
    })
    .change(function() {
        var $this = $(this);
        var newValue = $this.val();
        var oldValue = $this.data('old-value');
        $('.selects1 select').not(this).filter(function() {
            return $(this).val() == newValue;
        }).val(oldValue).data('old-value', oldValue);
        $this.data('old-value', newValue);
    });

Example fiddle

更改所选选项的值

1 个答案: