javascript - 在 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

使用 Switch 语句：

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>