javascript通过多个选项值更新表单字段

2w2cym1i  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(239)

首先,我不熟悉这个。我想做一个简单的表格来计算右矩形棱镜的体积。如果用户选择“自定义”选项,则用户可以自定义长度(自定义盘江)、宽度(自定义列巴)和高度(自定义丁吉)。但也有其他不需要定制的选项(10x10x5)等。
我找到了通过自定义选项计算结果的解决方案。但是我如何计算其他选项(不计算)。

function pilihUkuran() {
  var custom = document.getElementById("ukuran");
  if (custom.value == "30x30x5") {
    document.getElementById("customukuran1").style.visibility = "hidden";
  } else if (custom.value == "10x10x5") {
    document.getElementById("customukuran1").style.visibility = "hidden";
  } else if (custom.value == "20x20x5") {
    document.getElementById("customukuran1").style.visibility = "hidden";
  } else
    document.getElementById("customukuran1").style.visibility = "visible";
}

function mult(pj, lb, tg) {
  var isipj = pj;
  var isilb = lb;
  var isitg = tg;
  var hasil = isipj * isilb * isitg;
  document.getElementById('rupiah').value = hasil;
}
<div>
  <label class="col-sm-2 mb-3">&nbsp;&nbsp;Ukuran</label>
  <select name="ukuran" id="ukuran" class="form-select-auto" onchange="pilihUkuran()" placeholder="Input ukurannya" method="post" required>
    <option name="ukuran_1" id="ukuran_1" value="custom" method="post">Custom</option>
    <option name="ukuran_2" id="ukuran_2" value="10x10x5" selected>10x10x5 cm</option>
    <option name="ukuran_3" id="ukuran_3" value="20x20x5">20x20x5 cm</option>
    <option name="ukuran_4" id="ukuran_4" value="30x30x5">30x30x5 cm</option>
  </select>
</div>

<div id="customukuran1" style="visibility: hidden;">
  <select name="customukuran" id="customukuran" class="form-control" style="display:none;" method="get">
    <!-- MENDAPATKAN VARIABEL P x L x T -->
    <input class="customp" id="custom_panjang" onkeyup="mult(this.value,document.getElementById('custom_lebar').value,document.getElementById('custom_tinggi').value);" name="custom_panjang" type="number" placeholder="Panjang (cm)">

    <input class="customl" id="custom_lebar" onkeyup="mult(document.getElementById('custom_panjang').value,this.value,document.getElementById('custom_tinggi').value);" name="custom_lebar" type="number" placeholder="Lebar (cm)">

    <input class="custom3" id="custom_tinggi" onkeyup="mult(document.getElementById('custom_panjang').value,document.getElementById('custom_lebar').value,this.value);" name="custom_tinggi" type="number" placeholder="Tinggi (cm)">

  </select><br>
</div>

<input class="mr-5 rupiah" name="rupiah" id="rupiah" disabled style="color: black; font-weight: bolder;">

或者你可以在这里看到演示https://jsfiddle.net/aurj74nq/
请帮帮我,谢谢。

2jcobegt

2jcobegt1#

打电话给 mult 当选择中的值更改时。还有,打电话 pilihUkuran 最后一次,以便调用函数以获取select的初始值。如果你不想要这个,那么你可以省略它。

function pilihUkuran() {
  var custom = document.getElementById("ukuran");
  if (custom.value == "30x30x5") {
    document.getElementById("customukuran1").style.visibility = "hidden";
    mult(30, 30, 5)
  } else if (custom.value == "10x10x5") {
    document.getElementById("customukuran1").style.visibility = "hidden";
    mult(10, 10, 5)
  } else if (custom.value == "20x20x5") {
    document.getElementById("customukuran1").style.visibility = "hidden";
    mult(20, 20, 5)
  } else
    document.getElementById("customukuran1").style.visibility = "visible";
}

function mult(pj, lb, tg) {
  var isipj = pj;
  var isilb = lb;
  var isitg = tg;
  var hasil = isipj * isilb * isitg;
  document.getElementById('rupiah').value = hasil;
}

pilihUkuran(); // Optional
<div>
  <label class="col-sm-2 mb-3">&nbsp;&nbsp;Ukuran</label>
  <select name="ukuran" id="ukuran" class="form-select-auto" onchange="pilihUkuran()" placeholder="Input ukurannya" method="post" required>
    <option name="ukuran_1" id="ukuran_1" value="custom" method="post">Custom</option>
    <option name="ukuran_2" id="ukuran_2" value="10x10x5" selected>10x10x5 cm</option>
    <option name="ukuran_3" id="ukuran_3" value="20x20x5">20x20x5 cm</option>
    <option name="ukuran_4" id="ukuran_4" value="30x30x5">30x30x5 cm</option>
  </select>
</div>

<div id="customukuran1" style="visibility: hidden;">
  <select name="customukuran" id="customukuran" class="form-control" style="display:none;" method="get">
    <!-- MENDAPATKAN VARIABEL P x L x T -->
    <input class="customp" id="custom_panjang" onkeyup="mult(this.value,document.getElementById('custom_lebar').value,document.getElementById('custom_tinggi').value);" name="custom_panjang" type="number" placeholder="Panjang (cm)">

    <input class="customl" id="custom_lebar" onkeyup="mult(document.getElementById('custom_panjang').value,this.value,document.getElementById('custom_tinggi').value);" name="custom_lebar" type="number" placeholder="Lebar (cm)">

    <input class="custom3" id="custom_tinggi" onkeyup="mult(document.getElementById('custom_panjang').value,document.getElementById('custom_lebar').value,this.value);" name="custom_tinggi" type="number" placeholder="Tinggi (cm)">

  </select><br>
</div>

<input class="mr-5 rupiah" name="rupiah" id="rupiah" disabled style="color: black; font-weight: bolder;">

相关问题