如果 2 个 select 框相互匹配并自动 select 第二个选项不匹配，我该如何制作它们？

Question

如何通过自动 select 选择第二个选项，使 2 个 select 框在匹配时相互消除？

我希望它而不是 "alert" 具有一项功能，当它们匹配时，自动将 select 选项框之一上的一个选项更改为第二个选项。

如果我可以保留警报并让它自动更改，那将是理想的，但如果不能保留警报，我接受。

JavaScript

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$(function () {
  'use strict';
  $('.OBSMatch').on('change', function (event) {
    var selectedValue = $(event.currentTarget).val();
    var matchedDropdowns = $('.OBSMatch').filter(function (index) {
      return $(this).val() === selectedValue;
    });
    if (matchedDropdowns.length > 1) {
      alert("OBS! You cannot use it, because it matches each other!")
    }
  })
})
});
</script>

HTML

<select name="LangF1" class="OBSMatch">
<option value="zh-CN">Chinese (Simplified)</option>
<option selected value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="" disabled>&#8212;</option>
<option value="auto">Auto Detect</option>
</select>

<select name="LangF2" class="OBSMatch">
<option value="zh-CN">Chinese (Simplified)</option>
<option value="en">English</option>
<option selected value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="" disabled>&#8212;</option>
<option value="auto">Auto Detect</option>
</select>

更新： 我从完整代码中添加了这个更新，因为以前的好答案因为这个切换选项语言的按钮而无法正常工作。

<script language="JavaScript">
function getSelectedOption( elem ) {
  return elem.options[elem.selectedIndex].value;
}

function setSelectedOption( elem, value ) {
  for (let i = 0; i < elem.options.length; i++) {
    elem.options[i].selected = value === elem.options[i].value;
  }
}

function swapByOptionValue( selector1, selector2 ) {
  var elem1 = document.querySelector(selector1),
      elem2 = document.querySelector(selector2),
      selectedOption1 = getSelectedOption( elem1 ),
      selectedOption2 = getSelectedOption( elem2 );
  setSelectedOption( elem1, selectedOption2 );
  setSelectedOption( elem2, selectedOption1 );
}

function swapBySelectedIndex( selector1, selector2 ) {
  var elem1 = document.querySelector(selector1),
      elem2 = document.querySelector(selector2),
      selectedOption1 = elem1.selectedIndex;

  elem1.selectedIndex = elem2.selectedIndex;
  elem2.selectedIndex = selectedOption1;
}
</script>
<input type="button" id="SwitchLang" onClick="swapByOptionValue('select[name=\'LangF1\']', 'select[name=\'LangF2\']');" value=" Swap &#9650;&#9660; Language ">

Answer 1

您要的是 UI，它允许用户将 UI 置于非法状态，发出警报，并尝试使事情合法化。

这真的不是一个伟大的UI。

如果可能的话，应该阻止用户将 UI 置于非法状态，这样就不需要警告也不需要更正任何东西。这样的策略在这里是非常可能的。

基本规则相当简单。更改 select 菜单时：

与此菜单的当前 selection 相对应的其他菜单应该被禁用。
应启用其他菜单的其他选项。
任何最初禁用的选项都需要防止被启用。

var $menus = $('.OBSMatch').on('change', function(event) {
    $menus.not(this).find('option').filter(function(index, opt) {
        return opt.value === event.target.value;
    }).prop('disabled', true) // disable the other menu's option corresponding to this menu's selection
    .siblings().not('._protected').prop('disabled', false); // enable the other menu's options except any that are protected.
});

$menus.find('option').filter(function(index, opt) {
    return opt.disabled;
}).addClass('_protected'); // protect any initially disabled options from being enabled

$menus.trigger('change'); // initialize everything

DEMO

"Auto Detect" 可能需要作为特殊情况处理 - 我不确定。

或者，对于一组 3+ select 个菜单...

DEMO

编辑：

两个菜单的select离子可以切换如下:

function switch_(selector) {
    var $menus = $(selector);
    var values = $menus.map(function() {
        return this.value;
    }).get().reverse(); // reverse() swaps the two values
    $menus.each(function(i, menu) {
        $(this).val(values[i]); // implement the switch
    }).trigger('change'); // re-initialize everything
}

// call
switch_('.OBSMatch');

// so, assuming you have a #switch element :
$('#switch').on('click', function() {
    switch_('.OBSMatch');
});

DEMO

函数不能命名为switch，这是一个javascript保留字；因此 switch_

Answer 2

您在找这样的东西吗？

这里的关键是，关于改变：

获取目标元素的值
获取相关值select
如果值匹配，将目标元素的值更改为下一个选项

$(window).load(function() {

  $(function() {
  
    'use strict';
    
    $('.OBSMatch').on('change', function(event) {
    
      var selectedVal = $(event.currentTarget).val();
      var relatedId = $(this).attr('data-related');
      var $otherSelect = $('#' + relatedId);
      var otherVal = $otherSelect.val();

      if (selectedVal === otherVal) {
        
        $(this).val($(this).find('option:selected').next().val());
        
        // alert("OBS! You cannot use it, because it matches each other!");
        
      }
    })
    
  })
});

// UPDATE:  Added code from updated question to test solution along with rest of code:

function getSelectedOption( elem ) {
  return elem.options[elem.selectedIndex].value;
}

function setSelectedOption( elem, value ) {
  for (let i = 0; i < elem.options.length; i++) {
    elem.options[i].selected = value === elem.options[i].value;
  }
}

function swapByOptionValue( selector1, selector2 ) {
  var elem1 = document.querySelector(selector1),
      elem2 = document.querySelector(selector2),
      selectedOption1 = getSelectedOption( elem1 ),
      selectedOption2 = getSelectedOption( elem2 );
  setSelectedOption( elem1, selectedOption2 );
  setSelectedOption( elem2, selectedOption1 );
}

function swapBySelectedIndex( selector1, selector2 ) {
  var elem1 = document.querySelector(selector1),
      elem2 = document.querySelector(selector2),
      selectedOption1 = elem1.selectedIndex;

  elem1.selectedIndex = elem2.selectedIndex;
  elem2.selectedIndex = selectedOption1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="LangF1" class="OBSMatch" data-related="ddl2" id="ddl1">
<option value="zh-CN">Chinese (Simplified)</option>
<option selected value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="disabled" disabled>&#8212;</option>
<option value="auto">Auto Detect</option>
</select>

<select name="LangF2" class="OBSMatch" data-related="ddl1" id="ddl2">
<option value="zh-CN">Chinese (Simplified)</option>
<option value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option selected value="disabled" disabled>&#8212;</option>
<option value="auto">Auto Detect</option>
</select>

<!-- UPDATE:  Added code from updated question to test solution along with rest of code: -->

<input type="button" id="SwitchLang" onClick="swapByOptionValue('select[name=\'LangF1\']', 'select[name=\'LangF2\']');" value=" Swap &#9650;&#9660; Language ">

如果 2 个 select 框相互匹配并自动 select 第二个选项不匹配，我该如何制作它们？

How do I make 2 select boxes to dismiss each other if they mach and automatically select the second option to not match?

javascript

jquery

html

select

option