Question

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

例如，最初 listA 设置为1， listE 设置为5.如果 listA 更改为5，则 listE 应该变为1，其他列表保持不变。

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

编辑：每个值只应在列表组中出现一次。他们最初都有不同的价值观。

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

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

Answer 2

只需在JS的最后一行中将'：selected'添加到您的选择器：

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

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

2 个答案: