Javascript 不发送数据到输出

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 时，脚本需要发送 <b>Value one</b>到输出。当所选值 = 0 时，脚本需要发送 <b>Value two</b>到输出。

输出如下:

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

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

https://jsfiddle.net/7fa84ufc/

Answer 1

尝试一下。我做了一些更改:

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

你的 fiddle 也被破坏了，因为在执行 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>