Question

这就是我要做的事情：

用户选择“One”选项或“Two”选项。如果用户选择“一个”，则结果为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

这个怎么样？在data-attribute中设置值并计算总和。

<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;

Demo

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>

使用HTML下拉列表值与JavaScript

5 个答案:

JS

Demo