如果两个选择框匹配并自动选择不匹配的第二个选项，如何使它们相互关闭？

debugcn 发表于 Dev

搜索加载

如何通过自动选择第二个选项使 2 个选择框在匹配时相互关闭？

我希望它而不是“警报”有一个功能，当它们匹配时，自动将一个选项更改为选择选项框之一上的第二个选项。

如果我可以保持警报并让它自动更改，那将是理想的，但如果无法保持警报，我会接受。

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 ">

漫游者-1888

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

这真的不适合一个伟大的用户界面。

如果可能的话，应该防止用户将 UI 置于非法状态，那么就不需要警报，也不需要纠正任何事情。这种策略在这里是非常可能的。

基本规则相当简单。在更改任一选择菜单时：

应禁用与此菜单当前选择相对应的另一个菜单。
应该启用其他菜单的其他选项。
任何最初禁用的选项都需要受到保护，以免被启用。

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

演示

“自动检测”可能需要作为特殊情况处理 - 我不确定。

或者，对于一组 3+ 选择菜单......

演示

编辑：

两个菜单的选择可以切换如下：

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');
});

演示

函数不能命名switch，这是一个javascript保留字；所以switch_

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。