使用 Typescript/Javascript 交换两个 HTML <select> 元素的值答案

【问题标题】：Swapping the values of two HTML <select> elements using Typescript/Javascript使用 Typescript/Javascript 交换两个 HTML <select> 元素的值
【发布时间】：2022-01-07 07:33:53
【问题描述】：

我对使用 Typescript/Javascript 非常陌生，但到目前为止，我在互联网上找到的任何信息都没有帮助我解决我的问题。我正在尝试交换两个选择元素的选项值，以便在 HTML 网站上看到这些元素的交换值，并在 Typescript 文件中交换它们的值以使用它们。

这是我的 HTML 文件中选择元素的样子：

<div class="bigtext">Currency 1:</div>
<div class="smalltext">Your input currency</div>
    <select id="select1">
        <option></option>
        <option>EUR</option>
        <option>USD</option>
    </select>

<div class="bigtext">Currency 2:</div>
<div class="smalltext">The currency you want to convert to</div>
    <select id="select2">
        <option></option>
        <option>EUR</option>
        <option>USD</option>
    </select>

这是在表单标签内。应该交换元素值的函数如下所示（在 Javascript 中）：

let currency1 = "";
let currency2 = "";

document.getElementById("select1").addEventListener("change", event => {
    currency1 = document.getElementById("select1")[0].value;
});
document.getElementById("select2").addEventListener("change", event => {
    currency2 = document.getElementById("select2")[0].value;
});

function swapCurrencies() {
    let helper = currency1;
    let htmlhelper = document.getElementById("select1")[0].value;
    currency1 = currency2;
    document.getElementById("select1")[0].value = document.getElementById("select2")[0].value;
    currency2 = helper;
    document.getElementById("select2")[0].value = htmlhelper;
}

这里可能存在很多风格上的不准确之处，但现在我真的很高兴知道为什么它没有按照我想要的方式工作。当我单击 HTML 页面上的按钮时，绝对没有任何反应。

提前致谢！

【问题讨论】：

标签： javascript html typescript select swap

【解决方案1】：

看起来很简单：

const select1 = document.getElementById("select1");
const select2 = document.getElementById("select2");

let currency1 = select1.value;
let currency2 = select2.value;

select1.addEventListener("change", () => currency1 = select1.value);
select2.addEventListener("change", () => currency2 = select2.value);

function swapCurrencies() {
  const temp = select1.value;
  select1.value = select2.value;
  select2.value = temp;

  currency1 = select1.value;
  currency2 = select2.value;
}

function showCurrencies() {
  alert(`Currency 1: ${currency1}\nCurrency 2: ${currency2}`);
}

<div class="bigtext">Currency 1:</div>
<div class="smalltext">Your input currency</div>
<select id="select1">
  <option></option>
  <option>EUR</option>
  <option>USD</option>
</select>

<div class="bigtext">Currency 2:</div>
<div class="smalltext">The currency you want to convert to</div>
<select id="select2">
  <option></option>
  <option>EUR</option>
  <option>USD</option>
</select>

<p><button onclick="swapCurrencies();">Swap</button></p>

<p><button onclick="showCurrencies();">Show selected</button></p>

【讨论】：

太棒了，谢谢！这对 HTML 页面起到了作用。 Javascript 是否使用此函数自动更新currency1 或currency2 的值，还是我必须保留我的事件监听器？
@Robson 不，如果你想保持这些变量的更新，你仍然需要你的事件监听器。交换值后，您还需要更新 swapCurrencies 函数或 <select> 元素上的 manually trigger the change event 的值。

【解决方案2】：

这是另一个示例，它可以在没有按钮的情况下工作。而是为每个选项分配值。

function swap_selections(name1, name2) {
    let ob1 = document.getElementById(name1)
    let ob2 = document.getElementById(name2)
    let val1 = ob1.value;
    let val2 = ob2.value;
    if(val2 != "0") {
        if(val1 == "1") {
            if(val2 != "2") 
                ob2.value = "2";
        } else if(val1 == "2") {
            if(val2 != "1") 
                ob2.value = "1";
        }
    }
}

function my_onload() {
    document.getElementById("select1").addEventListener("change", 
        event => { swap_selections("select1", "select2"); });
    document.getElementById("select2").addEventListener("change",
        event => { swap_selections("select2", "select1"); });
}

<body onload="my_onload()">

<div class="bigtext">Currency 1:</div>
<div class="smalltext">Your input currency</div>
<select id="select1">
    <option value="0"></option>
    <option value="1">EUR</option>
    <option value="2">USD</option>
</select>

<div class="bigtext">Currency 2:</div>
<div class="smalltext">The currency you want to convert to</div>
<select id="select2">
    <option value="0"></option>
    <option value="1">EUR</option>
    <option value="2">USD</option>
</select>
    
</body>

【讨论】：