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

更改您的功能并在您的html上添加<p id="demoYear"></p>

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>

Answer 2

您可以在全局对象上存储价格：

var prices = {
    "15": {
        month: 150,
        year: 3500
    },
    "30": {
        month: 200,
        year: 4500
    }
    ...
}

然后从组合框中获取相应的值：

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

  <option value="">-- Select Number --</option>
  <option value="15"> 1-15
  <option value="30"> 16-30
  <option value="50"> 31-50
  <option value="75"> 51-75
  <option value="100"> 76-100
  <option value="125"> 101-125
  <option value="150"> 126-150
</select>


function myFunction() {
   var x = document.getElementById("rooms").value;
   if (prices[x]) {
      var monthPrice = prices[x].month;
      var yearPrice = prices[x].year;
   }

}

可以从不同的来源（例如ajax）恢复价格对象，并且可以存储稍后需要的更多信息。

Answer 3

您的意思是说，您还希望根据选定的每月套餐显示年度数据，只需将其与一年中的总月数相乘即可。这是片段，第一个显示月度数据＆amp;第二个将根据选定的月度数据显示年度数据：

function myFunction() {
       var x = document.getElementById("rooms").value;
       document.getElementById("demo").innerHTML =  x;
       document.getElementById("demo1").innerHTML =  parseInt(x.replace(/[,.]/g , '')) * 12;
}

<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="demo1"></p>

Answer 4

如果您要创建下拉客户端，则可以在下拉列表中添加其他属性，例如

new

在HTML选择下拉框

4 个答案: