在JavaScript中使用HTML下拉列表值

Question

這就是我想要做的：

用戶選擇選項“一個”或選項“兩個”。 如果用戶選擇“一個”，則結果為66 + 45如果用戶選擇“兩個”，則結果為35 + 45 。

如何使用HTML和JavaScript實現此功能？

到目前為止，這是我所做的：

HTML：

<select id="number">
  <option>One</option>
  <option>Two</option>
</select>

...

// Result
<div id="result"></div>

JAVASCRIPT：

function test(eventInfo) {

  var userSelection = document.getElementById("number").value;

  if () {
    result = 66 + 45;
  } else {
    result = 35 + 45;
  }

  var greetingString = userSelection;
  document.getElementById("result").innerText = greetingString;

}

Answer 1

考慮：

<select id="number">
  <option value="66">One</option>
  <option value="35">Two</option>
</select>

然后：

result = 45 + +document.getElementById("number").value;

Answer 2

這個怎么樣。 在數據屬性中設置值並計算總和。

<select id="number">
    <option value="1" data-Values="66,45">One</option>
    <option value="2" data-Values="35,28">Two</option>
</select>
<div id="result"></div>

JS

 var values = this.options[this.selectedIndex].getAttribute('data-Values');
 var sum = eval(values.split(',').join('+')); //Use with caution eval.
 document.getElementById("result").innerHtml = sum;

演示

Answer 3

為什么不使用value ：

<select id="number">
  <option value="66+45">One</option>
  <option value="35+45">Two</option>
</select>

var greetingString = $("#number option:selected").val(); 
// or document.getElementById("number").value;
document.getElementById("result").innerText = greetingString;

Answer 4

使用開關語句：

HTML：

<select id="number">
  <option value="66">One</option>
  <option value="35">Two</option>
</select>

使用Javascript：

var userSelection = document.getElementById("number").value;

    switch (userSelection)
    {
    case 66:
      result = 66 + 45;
      break;
    case 35:
      result = 35 + 45;
      break;
    }

Answer 5

您可以嘗試以下一種方法：

<select id="number" onchange="test(this.value);">
  <option value="66+45">One</option>
  <option value="35+45">Two</option>
</select>

...

// Result
<div id="result">here</div>

JS

<script>
function test(val) {
  document.getElementById("result").innerHtml = val;
}
</script>