首页 文章

JQuery - 下拉选择只需要重置选择了相同值的下拉列表

提问于
浏览 次
0

我有一系列下拉列表作为列 Headers ，其值为'name'，'address'，'phone'等 . 客户端数据将被加载到行中，然后用户可以从每个下拉列 Headers 中选择正确的字段来映射他们的数据 .

我想要做的是一次只允许选择一个选项的实例 . 例如，如果用户从第一列下拉列表中选择了“名称”，然后他们改变主意并从第二列下拉列表中选择“名称”，则第一个下拉列表应恢复为默认的“选择内容”选项值 .

使用以下内容，如果用户在任何列上设置值，它将重置所有其他列：

$('select').change(function(){
    $('select').not(this).val('0');
});

但是我想只重置选中了$（this）.val（）的列 . 我尝试过使用它，但它没有做任何事情：

$('select').change(function(){
    $('select option[value='+ $(this).val() +']').not(this).val('0');
});

这也失败了：

$('select').change(function(){
    $('select').not(this).find('option[value='+ $(this).val() + ']').val('0');
});

有任何想法吗？谢谢！

这是html - 下拉数量根据上传的客户数据而变化：

<select class="fun" id="field1" name="col[]">             
  <option value="0" selected>- Please select a field -</option>
  <option value="1">Name</option>
  <option value="2">Address</option>
  ...
</select>

<select class="fun" id="field2" name="col[]">             
  <option value="0" selected>- Please select a field -</option>
  <option value="1">Name</option>
  <option value="2">Address</option>
  ...
</select>
jquery

2 回答

  • 0

    尝试

    $('select').change(function(){
    $('select').not(this).has('option[value="'+  this.value + '"]:selected').val('0');
});

    演示：Fiddle

    回复于
  • 1

    试试这个解决方案

    $('select').change(function () {
        var secondSelect = $('select').not(this);
        if (secondSelect[0].selectedIndex == this.selectedIndex) {
            secondSelect[0].selectedIndex = 0;
        }
    });
    回复于

相关问题