我有两个输入选择,具有相同的选项。当我单击触发器时,我需要反转这两个选择之间的选项值。例如:
<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())
})
}
我怎样才能做到这一点?谢谢!
最佳答案
如果您尝试像这样交换字段的值:
当用户单击“反转”按钮时,字段的值会交换。
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>
关于javascript - 如何反转两个输入选择之间的选项值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53859878/