Question

我有一个下拉列表，在更改值时运行脚本。但现在我想从数据库中返回选定的值，并在所选值为2时运行脚本。

这是我的下拉列表：

<div class="col-md-9 col-sm-9 col-xs-12">
  <select class="form-control select2" id="status" name="status" style="width: 100%;">
    <option <?php echo ($row["status"] == "1") ? 'selected="selected"' : '';?> value="1">One</option>
    <option <?php echo ($row["status"] == "2") ? 'selected="selected"' : '';?> value="2">Two</option>
  </select>
</div>

输出的结果应该在这里部署：

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

这是在onchange上运行的脚本：

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

  dataEl.onchange = function() {
    if (dataEl.value === "1") {
      outputEl.innerHTML = ' ';
    } else if (dataEl.value === "2") {
      outputEl.innerHTML = '<div>(script)</div>';
    }
  };
</script>

我想保留脚本forchange。但是我还希望在数据库返回的值= 2时运行此脚本。我尝试了不同的脚本，例如添加dataEl.onLoad脚本，但这并没有显示值2的脚本。

有人知道我该怎么做吗？

Answer 1

要获取所选选项的值，您需要使用selectedIndex。

var e = document.getElementById("status");
var sel = e.options[e.selectedIndex].value;

主要示例：https://jsfiddle.net/z1wyz62s/

@John的完整示例：https://jsfiddle.net/z1wyz62s/3/

Answer 2

你为什么不打电话呢？

dataEl.onchange = function() {
  if (dataEl.value === "1") {
    outputEl.innerHTML = ' ';
  } else if (dataEl.value === "2") {
    var result = your_script();
    outputEl.innerHTML = '<div>'+result+'</div>';
  }
};

数据库返回值时运行脚本

2 个答案: