javascript - 在 HTML 选择下拉框中的 标记下传递不同的值

Question

初学者，尽我所能!

目标:一个下拉框，允许客户选择一个选项(房间数量)。然后，他们的选择将在两个不同的位置填充成本(报价)。第一个是每月费用，第二个是每年费用。

因此，我需要向框中传递不同的值，因为其中将显示每月和每年的结果。

任何人都可以帮忙吗，到目前为止我只能填充一个结果。

提前致谢。

function myFunction() {
       var x = document.getElementById("rooms").value;
       document.getElementById("monthlycost").innerHTML =  x;
       

}

<select id="rooms" onchange="myFunction()">

      <option value="">-- Select Number --</option>
      <option value="3,500"> 1-15
      <option value="4,500"> 16-30
      <option value="5,000"> 31-50
      <option value="5,500"> 51-75
      <option value="6,500"> 76-100
      <option value="8,000"> 101-125
      <option value="9,500"> 126-150
      </select>
      
      <p id="monthlycost"></p>

Answer 1

更改您的函数并添加 <p id="demoYear"></p>在你的html上

function myFunction() {
 var x = document.getElementById("rooms").value;
 document.getElementById("monthlycost").innerHTML =  x;
 var str = x;
 str = str.replace(/,/g, "");
  document.getElementById("demoYear").innerHTML = parseInt(str, 10)*12;
  document.getElementById("demo").innerHTML = x;
}

<select id="rooms" onchange="myFunction()">

      <option value="">-- Select Number --</option>
      <option value="3,500"> 1-15
      <option value="4,500"> 16-30
      <option value="5,000"> 31-50
      <option value="5,500"> 51-75
      <option value="6,500"> 76-100
      <option value="8,000"> 101-125
      <option value="9,500"> 126-150
      </select>

      <p id="demo"></p>
      <p id="demoYear"></p>