Как инвертировать значение параметра между двумя входами выбора?

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

Вам необходимо установить переменную, которая содержит одно значение, прежде чем его заменить.

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>

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

Все, что вам нужно сделать, это обновить код, чтобы временно сохранить значение 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>