在 HTML select 下拉框的 <option> 标签下传递不同的值

Question

新手尽力！

Objective：一个下拉框，允许客户select选择（房间数量）。然后，他们的 selected 选择将在两个不同的位置填充成本（报价）。第一个是每月费用，第二个是每年费用。

因此，我需要将不同的值传递给这些框，因为它们会显示每月和每年的结果。

谁能帮忙，我目前只能填充一个结果。

提前致谢。

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

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

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 2

你的意思是说，你还想根据所选的月度套餐显示年份数据，只需乘以一年中的总月数即可。这是片段，第一个显示月度数据，第二个将显示基于所选月度数据的年度数据：

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 3

更改您的功能并在您的 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 4

如果您正在创建下拉列表客户端，您可以在下拉列表中添加另一个属性，例如

<select id="leave" onchange="leaveChange(this.selectedIndex)">
  <option year="1" value="5">Get Married</option>
  <option year="2" value="10">Have a Baby</option>
  <option year="3" value="15">Adopt a Child</option>
  <option year="4" value="20">Retire</option>
  <option year="5" value="25">Military Leave</option>
  <option year="6" value="30">Medical Leave</option>
</select>

<div id="message"></div>
<div id="year"></div>

<script>
function leaveChange(index) {
    document.getElementById("message").innerHTML =      
    document.getElementById("leave").value;
    var e = document.getElementById("leave");
    var y = e.options[e.selectedIndex].getAttribute('year');
    document.getElementById("year").innerHTML = y;
  }
</script>

在 HTML select 下拉框的 <option> 标签下传递不同的值

Passing different values under the <option> tag in HTML select drop box

javascript

getelementbyid