Question

我想在下拉列表中的选定值更改时运行JavaScript。但剧本不起作用。

这是我的下拉列表：

<div class="form-group">
  <label>Status</label>
    <div>
      <select class="form-control select2" id="data" name="data" style="width: 100%;">
        <option value="1">Data one</option>
        <option value="0">Data two</option>
    </select>
  </div>
</div>

这是我的javascript：

<script type="text/javascript">
  var dataEl = document.querySelector('#data'),
    outputEl = document.querySelector('#output');

    dataEl.onchange = function() {
      outputEl.innerHTML = dataEl.value 
        if (1 === dataEl.value) { '<b>Value one</b>' }
        if (0 === dataEl.value) { '<b>Value two</b>' }
  };
</script>

当所选值= 1时，脚本需要将Value one发送到输出。当所选值= 0时，脚本需要将Value two发送到输出。

输出如下：

我还尝试将selected添加到选项中，但脚本仍然没有将数据发送到输出。

有人知道出了什么问题吗？

https://jsfiddle.net/7fa84ufc/

Answer 1

<select>元素.value是一个字符串，而不是一个数字。对==

使用1 == "1"运算符

dataEl.onchange = function() {
    if (dataEl.value == 1) { outputEl.innerHTML = '<b>Value one</b>' }
    if (dataEl.value == 0) { outputEl.innerHTML = '<b>Value two</b>' }
};

Answer 2

试一试。我做了一些改变：

我将第二个选项的值更改为“2”而不是“0”。
我将值与字符串“1”和“2”进行了比较，而不是数字1和2。
我添加了代码来实际更改输出段落中的HTML。
我在输出段落中放置了初始值Value one，以便显示最初加载页面的时间。

你的小提琴也被破坏了，因为在执行JavaScript时输出段落不存在。将其移到脚本上方。

var dataEl = document.querySelector('#data'),
    outputEl = document.querySelector('#output');

dataEl.onchange = function() {
  if (dataEl.value === "1") {
    outputEl.innerHTML = '<b>Value one</b>';
  } else if (dataEl.value === "2") {
    outputEl.innerHTML = '<b>Value two</b>';
  }
};

<div class="form-group">
  <label>Status</label>
  <div>
    <select id="data" name="data">
      <option value="1">Data one</option>
      <option value="2">Data two</option>
    </select>
  </div>
</div>

<p id="output" name="output"><b>Value one</b></p>

Javascript不会将数据发送到输出

2 个答案: