javascript - jQuery - 在选择列表之间交换值

Question

我有一个包含 n 个选择的列表，其中包含从 1 到 n 的值。每当我更改一个选择中的值时，包含相同值的另一个选择应交换为先前在第一个选择中选择的值。

例如，最初 listA 设置为 1，listE 设置为 5。如果 listA 更改为 5，则 listE应该变成1，其他list不变。

这与 How to swap values in select lists with jquery? 等问题不同因为值在多个动态列表之间交换，而不是在两个静态列表之间交换。

编辑:每个值在列表组中应该只出现一次。它们最初都有不同的值。

这是我到目前为止的代码，不用说，它不起作用:

http://jsfiddle.net/yye3U/

HTML:

<div class="parentdiv">
  <select class="ranking">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <select class="ranking">
    <option value="1">1</option>
    <option value="2" selected>2</option>
    <option value="3">3</option>
  </select>
  <select class="ranking">
    <option value="1">1</option>
    <option value="2">2<option>
    <option value="3" selected>3</option>
  </select>
</div>

JS:

var previous;
$( ".ranking" ).on( "focus", function() {
    previous = $( this ).val();
}).change(function() {
    var value = $( this ).val();
    var parent = $( this ).closest( ".parentdiv" );

    $( ".ranking option[value='" + value + "']", parent ).not( this ).parent().prop( 'selectedIndex', parseInt(previous) - 1 );
});

Answer 1

通过将先前的值存储在 DOM 元素的数据中，您可以使用简单的代码轻松地做您想做的事情:

$(".ranking").each(function(){
    $(this).data('__old', this.value);
}).change(function() {
    var $this = $(this), value = $this.val(), oldValue = $this.data('__old');

    $(".ranking").not(this).filter(function(){
        return this.value == value;
    }).val(oldValue).data('__old', oldValue);

    $this.data('__old', value)
});

Here's a fiddle