在html下拉菜单中的选择没有被javascript代码识别
在html下拉菜单中的选择没有被javascript代码识别
提问于 2017-07-20 18:40:45
使用以下html代码：
<select id="radius" class="form-control">
<option value="1">1 km</option>
<option value="2">2 km</option>
<option value="3">3 km</option>
<option value="4">4 km</option>
<option value="5" selected="selected">5 km (default)</option>
<option value="10">10 km</option>
<option value="15">15 km</option>
<option value="20">20 km</option>
</select>我创建了以下下拉菜单：
当用户选择其中一个距离时，应用程序将根据选择执行一些业务逻辑(就目前而言，它只是输出一条警告消息，以防选项1被选中)。如果用户不选择距离，则默认为5公里。
在我的javascript文件中，我添加了以下代码：
function setRadius(){
var radius = document.getElementById("radius");
var selectedValue = radius.options[radius.selectedIndex].value;
if (selectedValue == "1"){
alert("one");
}
}
$("#radius").on("mouseout", function(){
setRadius();
});此代码背后的思想如下：
如果用户选择一个距离，他/她单击下拉菜单，选择距离，然后移动鼠标离开菜单。这是应该触发setRadius()函数的时候。但是，上面的代码不起作用。当选择1公里的距离时，不会生成警告消息(鼠标从下拉菜单移开)。
为什么不起作用？
**************************UPDATE************************************
作为注释的结果，我将代码更改为：
$(document).ready(function(){
$("#radius").on("change", function(){
if (this.value == "1"){
alert("one");
}
});
});然而，它仍然不起作用。
********************UPDATE2***************************
如果我将代码更改为：
$(document).ready(function(){
$("#radius").on("change", function(){
console.log(this.value);
});
});我在控制台中得到以下错误消息：
为什么？我只是不明白。
Stack Overflow用户
发布于 2017-07-20 18:42:36
function setRadius(){
var radius = document.getElementById("radius");
var selectedValue = radius.options[radius.selectedIndex].value;
if (selectedValue == "1"){
alert("one");
}
}
$("#radius").on("mouseout", function(){
setRadius();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="radius" class="form-control">
<option value="1">1 km</option>
<option value="2">2 km</option>
<option value="3">3 km</option>
<option value="4">4 km</option>
<option value="5" selected="selected">5 km (default)</option>
<option value="10">10 km</option>
<option value="15">15 km</option>
<option value="20">20 km</option>
</select>
在这个片段中，您的代码看起来正在工作。尝试用以下方式包装您的javascript：
$(document).ready(function(){
// Your code here
});我怀疑您正在尝试在DOM完全加载之前将mouseout事件处理程序附加到#radius。在$(document).ready()中这样做将等待DOM在执行代码之前完全加载。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45222818
复制相关文章
相似问题
腾讯云开发者
