Question

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

<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())
  })
}

我该怎么做？谢谢！

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

Answer 2

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

当用户单击“反转”按钮时，将交换字段的值。

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>

Answer 3

您需要先设置一个包含一个值的变量，然后再替换它。

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>

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

3 个答案: