如何在两个输入选择之间反转选项值？答案

【问题标题】：How to invert options value between two input select?如何在两个输入选择之间反转选项值？
【发布时间】：2019-05-20 10:56:26
【问题描述】：

我有两个输入选择，具有相同的选项。单击触发器时，我需要反转这两个选择之间的选项值。例如：

<select id="source_currency">
 <option value="BRL" selected>BRL</option>
 <option value="USD">USD</option>
 <option value="EUR">EUR</option>
</select>

<select id="target_currency">
 <option value="BRL">BRL</option>
 <option value="USD">USD</option>
 <option value="EUR" selected>EUR</option>
</select>

我需要的是，点击触发器会发生这种情况：

<select id="source_currency">
 <option value="BRL">BRL</option>
 <option value="USD">USD</option>
 <option value="EUR" selected>EUR</option>
</select>

<select id="target_currency">
 <option value="BRL" selected>BRL</option>
 <option value="USD">USD</option>
 <option value="EUR">EUR</option>
</select>

我想用这样的函数改变值（但不起作用）：

<a href="#" class="is-txt-green-light" id="invertConvert">Invert</a>

// JS
function invertCurrency() {
  let sourceCurrency = $('#source_currency');
  let targetCurrency = $('#target_currency');
  const triggerInvert = $('#invertConvert');

  triggerInvert.click((e) => {
    e.preventDefault();
    sourceCurrency.val(targetCurrency.val())
  })
}

我该怎么做？谢谢！

【问题讨论】：

你只是将目标设置为源。
我可以假设selects 都只有一个选项吗？
@YaakovAinspan 不，他们有不止一个选择。我正在编辑我的问题。
id 为invertConvert的元素在哪里？
click 事件在函数内部被捕获？是否调用了该函数？

标签： javascript html select input

【解决方案1】：

您需要做的就是更新您的代码以在更改之前临时存储sourceCurrency 值，然后更改targetCurrency 值

function invertCurrency() {
  let sourceCurrency = $('#source_currency');
  let targetCurrency = $('#target_currency');
  const triggerInvert = $('#invertConvert');

  triggerInvert.click((e) => {
    e.preventDefault();
    const sourceVal = sourceCurrency.val();
    sourceCurrency.val(targetCurrency.val());
    targetCurrency.val(sourceVal);
  })
}

invertCurrency()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="source_currency">
 <option value="BRL" selected>BRL</option>
 <option value="USD">USD</option>
 <option value="EUR">EUR</option>
</select>

<select id="target_currency">
 <option value="BRL">BRL</option>
 <option value="USD">USD</option>
 <option value="EUR" selected>EUR</option>
</select>

<button id='invertConvert'>Invert</button>

【讨论】：

您确实意识到sourceVal 可能会发生变化，因此不应使用const 来定义？
不，sourceVal 不会改变
用 sn-p 更新
这不起作用：/如果我将变量放在返回值的console.log 中，但不要反转：/

【解决方案2】：

在替换它之前，您需要设置一个包含一个值的变量。

let sourceCurrency = $('#source_currency > option');
let targetCurrency = $('#target_currency > option');
const triggerInvert = $('#invertConvert');

triggerInvert.on("click", function(){
  let option1 = sourceCurrency.val(); // Store first option
  sourceCurrency.val(targetCurrency.val()); // Copy second to first
  targetCurrency.val(option1); // Copy first to second
  
  // Report results
  console.log(sourceCurrency.val(), targetCurrency.val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="source_currency"><option value="option_goo">Option Goo</option></select>

<select id="target_currency"><option value="option_foo">Option Foo</option></select>
<button id="invertConvert">Invert</button>

【讨论】：

@Amessihel 你运行了我的 sn-p 吗？单击按钮，您将看到值已交换。然后再次单击该按钮，您会看到它们交换回来了。
@Amessihel 自原始帖子以来，OP 已更改问题。最初，他要求交换value，而不是显示的文本。而且，在原版中，每个select 中只有一项。这个答案完全符合原始问题的要求。
@Amessihel 谢谢，但不担心否决票。我买得起。 ;)

【解决方案3】：

如果您尝试像这样交换字段的值：

当用户点击反转按钮时，字段的值被交换。

const triggerInvert = $('#invertConvert');

triggerInvert.click((e) => {
  let sourceCurrency = $('#source_currency');
  let sourceCurrency_val = sourceCurrency.val();

  let targetCurrency = $('#target_currency');
  let targetCurrency_val = targetCurrency.val();

  e.preventDefault();
  sourceCurrency.val(targetCurrency_val);
  targetCurrency.val(sourceCurrency_val);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="source_currency">
  <option value="GBP" selected>Pound Sterling</option>
  <option value="USD">Dollar</option>
  <option value="EUR">Euro</option>
</select>

<select id="target_currency">
  <option value="GBP">Pound Sterling</option>
  <option value="USD">Dollar</option>
  <option value="EUR" selected>Euro</option>
</select>

<button id="invertConvert">
Convert
</button>

【讨论】：