所选选项不运行脚本

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

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

脚本的脚本工作只有当值被改变，并且不显示脚本值1时所选择的选项不会改变。

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

这里是我的脚本：

的jsfiddle

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>

来源

2017-06-20 John

你想在页面加载时调用你的函数吗？只需将'dataEl.onchange（）'添加到脚本。 – PeterMader

我想要两个。我想在选择没有改变的时候显示'

result option one

'，当值改变时运行'dataEl.onchange = function（）'。目前第二部分（dataEl.onchange）正在工作。 – John

我想这是你想要的，我修改了代码一点，但在汇总，我只是在元素（#select）中添加了onload事件。

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>'; 
 
    } 
 
}

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

来源

2017-06-20 16:31:38

是的，它工作。谢谢 – John

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

只是为了澄清什么selected属性不（来源：W3C）：

存在时，它指定了一个选项，应预先选择时页面加载。

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

所以，如果你想运行，无需用户干预的脚本，只需运行它：

dataEl.onchange();

来源

2017-06-20 16:27:10 deblocker

但是我想在没有任何事情时运行脚本。脚本需要显示'

result option one

'当值没有改变时 – John

您的意思是，您需要在页面加载时显示默认选择的值？ – deblocker

这就是我的意思：

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();

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

来源

2017-06-20 16:34:05 PeterMader

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

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>'; 
     } 
}

它所做的只是调用一个函数来获取所选值，无论是在页面加载时还是在所选值改变时。

来源

2017-06-20 16:43:17

所选选项不运行脚本

回答

相关问题