选择选择选项Javascript DOM后自动填充输入答案

【问题标题】：Autofill input after selected select option Javascript DOM选择选择选项Javascript DOM后自动填充输入
【发布时间】：2023-04-09 05:06:02
【问题描述】：

我想在输入框上创建一些带有自动填充价格的表单，但我不知道如何在我的代码中实现。首先我有选择选项然后选择选项后输入框中的价格将自动生成，然后我输入折扣值，然后总价将自动生成（基本价格折扣％）。这是我的代码：

function bali() {
  var e = document.getElementById("bali");
  e.addEventListener("change", function() {
    var val = 7000000;
    document.getElementById("harga").value = val;
  })
};

<form name="cal" action="">
  <table>
    <caption>
      <h1>
        Kalkulator
      </h1>
      <h3>
        Paket Wisata Imam Tour
      </h3>
    </caption>
    <tr>
      <td>Nama Paket Tour</td>
      <td>:</td>
      <td>
        <select name="" id="paket">
          <option onchange="bali()" id="bali" value="">Paket Tour Bali</option>
          <option value="">Paket Tour Korea</option>
          <option value="">Paket Tour Eropa</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Harga Paket</td>
      <td>:</td>
      <td>Rp.<input id="harga" name="harga" type="number" value="0"></td>
    </tr>
    <tr>
      <td>Diskon</td>
      <td>:</td>
      <td><input id="diskon" name="diskon" type="number">%</td>
    </tr>
    <tr>
      <td>Total Bayar</td>
      <td>:</td>
      <td><input id="tot" name="tot" type="text"></td>
    </tr>

  </table>
</form>

【问题讨论】：

标签： javascript html dom

【解决方案1】：

您添加的事件有误。您不能在option 本身上添加addEventListener 更改。它永远不会改变。选择元素。

将您的 onchange 事件移至其中。 onchange="myFunction(event)" 并将 event 传递给它。然后您可以获取该事件和选定的选项值：

function myFunction(event) {
  console.log(event.target.value)

那么你就可以以此为基础制定条件了：

if (event.target.value === "Bali") {
    document.getElementById("harga").value = 7000;

...

我也在 HTML 中添加了值以使其正常工作。我还建议添加一个默认的预选选项：

  <option selected disabled>...</option>

这也可以通过其他方式完成。

function myFunction(event) {
  console.log(event.target.value)

  if (event.target.value === "Bali") {
    document.getElementById("harga").value = 7000;
  } else if (event.target.value === "Korea") {
    document.getElementById("harga").value = 8000;
  } else if (event.target.value === "Eropa") {
    document.getElementById("harga").value = 9000;
  }

};

<form name="cal" action="">
  <table>
    <caption>
      <h1>
        Kalkulator
      </h1>
      <h3>
        Paket Wisata Imam Tour
      </h3>
    </caption>
    <tr>
      <td>Nama Paket Tour</td>
      <td>:</td>
      <td>
        <select name="" id="paket" onchange="myFunction(event)">
          <option selected disabled>...</option>
          <option value="Bali">Paket Tour Bali</option>
          <option value="Korea">Paket Tour Korea</option>
          <option value="Eropa">Paket Tour Eropa</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Harga Paket</td>
      <td>:</td>
      <td>Rp.<input id="harga" name="harga" type="number" value="0"></td>
    </tr>
    <tr>
      <td>Diskon</td>
      <td>:</td>
      <td><input id="diskon" name="diskon" type="number">%</td>
    </tr>
    <tr>
      <td>Total Bayar</td>
      <td>:</td>
      <td><input id="tot" name="tot" type="text"></td>
    </tr>

  </table>
</form>

【讨论】：

谢谢你的完美

【解决方案2】：

在select里面放onchange，把object作为param传进去，还要给options设置id和value，比如：

<select name="" id="paket" onchange="myFunction(this)">
    <option id="bali" value="bali">Paket Tour Bali</option>
    <option id ="korea" value="korea">Paket Tour Korea</option>
    <option id ="eropa" value="eropa">Paket Tour Eropa</option>
</select>

Then, whenever the option changes, this function will be called

function myFunction(elem) {
    if (elem.value === "bali") {
        document.getElementById("harga").value = 700000;
    } else if(elem.value === "korea" {
       // put your korea logic here
    } else if (elem.value === "eropa") {
       // put your eropa logic here
    }
}

【讨论】：