在数据库返回值时运行脚本

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>

这是在更改上运行的脚本：

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

我想保留脚本以供更改。但是我也想在数据库返回的值 =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>';
}
};