Question

我使用HTML <select>来选择选项。我的选择中的第一个值是selected。对于所有这些选项，我有一个运行不同脚本的JavaScript。

当我将值更改为2时，javascript运行值为2 (dataEl.value === "2") { outputEl.innerHTML = '<div>result option two</div>';

的脚本

该脚本仅在值更改时有效，并且在未更改所选选项时未显示值1的脚本。

有人知道如何解决这个问题吗？

这是我的剧本：

的jsfiddle

https://jsfiddle.net/yua9vanz/

HTML

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Select</label>
  <div class="col-md-9 col-sm-9 col-xs-12">
    <select class="form-control select2" id="select" name="select" style="width: 100%;">
      <option selected="selected" value="1">Option one</option>
      <option value="2">Option two</option>
      <option value="3">Option three</option>
    </select>
  </div>
</div>

<p id="output1"></p>

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

  dataEl.onchange = function() {
    if (dataEl.value === "1") {
      outputEl.innerHTML = '<div>result option one</div>';

    } else if (dataEl.value === "2") {
      outputEl.innerHTML = '<div>result option two</div>';

    } else if (dataEl.value === "3") {
      outputEl.innerHTML = '<div>result option three</div>';
    }
  };
</script>

Answer 1

这就是我的意思：

＆＃13;

var dataEl = document.querySelector('#select'),
  outputEl = document.querySelector('#output1');

dataEl.onchange = function() {
  if (dataEl.value === "1") {
    outputEl.innerHTML = '<div>result option one</div>';
  } else if (dataEl.value === "2") {
    outputEl.innerHTML = '<div>result option two</div>';
  } else if (dataEl.value === "3") {
    outputEl.innerHTML = '<div>result option three</div>';
  }
};

dataEl.onchange();

＆＃13;

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Select</label>
  <div class="col-md-9 col-sm-9 col-xs-12">
    <select class="form-control select2" id="select" name="select" style="width: 100%;" onchange="check()">
      <option selected="selected" value="1">Option one</option>
      <option value="2">Option two</option>
      <option value="3">Option three</option>
    </select>
  </div>
</div>

<p id="output1"></p>

＆＃13;

Answer 2

我认为这就是你想要的，我稍微修改了一下代码，但总的来说，我刚刚在元素（#select）中添加了onload事件。

＆＃13;

var dataEl = document.querySelector('#select'),
  outputEl = document.querySelector('#output1');

dataEl.addEventListener("load", check());

function check() {
  if (dataEl.value === "1") {
    outputEl.innerHTML = '<div>result option one</div>';

  } else if (dataEl.value === "2") {
    outputEl.innerHTML = '<div>result option two</div>';

  } else if (dataEl.value === "3") {
    outputEl.innerHTML = '<div>result option three</div>';
  }
}

＆＃13;

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Select</label>
  <div class="col-md-9 col-sm-9 col-xs-12">
    <select class="form-control select2" id="select" name="select" style="width: 100%;" onchange="check()">
      <option selected="selected" value="1">Option one</option>
      <option value="2">Option two</option>
      <option value="3">Option three</option>
    </select>
  </div>
</div>

<p id="output1"></p>

＆＃13;

Answer 3

您应该添加onclick事件（以及可选onkeypress来检测键盘导航。）

只是为了澄清selected属性的作用（来源：W3C）：

如果存在，则指定应在何时预先选择选项   页面加载。

预先选择的选项将首先显示在下拉列表中。

因此，如果您想在没有用户干预的情况下运行脚本，只需运行它：

dataEl.onchange();

Answer 4

另一种解决方案，虽然不理想，但如下：

var dataEl = document.querySelector('#select');

showResult(dataEl);
dataEl.onchange = function() {
    showResult(dataEl);
};

function showResult(selector) {
      var outputEl = document.querySelector('#output1');
      if (selector.value === "1") {
        outputEl.innerHTML = '<div>result option one</div>';

      } else if (selector.value === "2") {
        outputEl.innerHTML = '<div>result option two</div>';

      } else if (selector.value === "3") {
        outputEl.innerHTML = '<div>result option three</div>';
      }
}

所有这一切都是调用一个函数来获取所选值，包括页面加载和所选值的变化。

选定的选项不会运行脚本

4 个答案: