Question

使用以下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 km的距离（并且鼠标远离下拉菜单）时，不会生成警报消息。

为什么不工作？

************************** 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);
    });

});

我在控制台中收到以下错误消息：

为什么？我只是不明白。

Answer 1

＆＃13;

function setRadius(){
    var radius = document.getElementById("radius");
    var selectedValue = radius.options[radius.selectedIndex].value;
       if (selectedValue == "1"){
            alert("one");
       }
}

$("#radius").on("mouseout", function(){

    setRadius();

});

＆＃13;

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

＆＃13;

看起来您的代码在此片段中正在运行。尝试将javascript包装在以下内容中：

$(document).ready(function(){
  // Your code here
});

我怀疑你是在DOM完全加载之前尝试将mouseout事件处理程序附加到#radius。在$（document）.ready（）中执行此操作将等待DOM在执行代码之前完全加载。

Answer 2

您应该使用change事件作为列表（而不是mouseout），而不是让回调函数调用setRadius，只需将所有代码放入回调中。

此外，代码可以多比你拥有的更简单，因为在DOM事件处理程序中，this引用了DOM元素。所以你只需要this.value。

＆＃13;

// Once the DOM is parsed and ready...
$(function(){

  // Set up a change event callback function for the select
  $("#radius").on("change", function(){
    console.log(this.value); // just for testing
    if (this.value == "1"){
      alert("one");
    }
  });
  
});

＆＃13;

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

＆＃13;

javascript代码无法识别html下拉菜单中的选项

2 个答案: