choice in html dropdown menu not recognised by javascript code

Question

With the following html code:

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

I created the following dropdown menu:

enter image description here

When the user selects one of the distances, the app will do some business logic based on the choice (for now it just outputs an alert message in case option 1 is selected). If the user doesn't choose a distance, it defaults to 5 km.

In my javascript file I added the following code:

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

The idea behind this code is as follows:

If the user chooses a distance, he/she clicks on the dropdown menu, chooses the distance and then moves the mouse away from the menu. That is when the the setRadius() function is supposed to get triggered. However, the code above does not work. No alert message is generated when a distance of 1 km is selected (and the mouse moves away from the dropdown menu).

Why is t not working?

**************************UPDATE************************************

As a result of the comments I changed my code to this:

$(document).ready(function(){
 $("#radius").on("change", function(){
 if (this.value == "1"){
 alert("one");
 }
 });
});

However, it still doesn't work.

********************UPDATE2***************************

if I change the code to this:

$(document).ready(function(){
 $("#radius").on("change", function(){
 console.log(this.value);
 });
});

I get the following error message in the console:

enter image description here

WHY? I just don't understand.

• James: I wonder why you would use the mouseout and not the change event handler to trigger this? Also, radius.value works fine instead of digging through the options to get it.
• aalcutt: You don't have your script wrapped in a jquery ready, so make sure your script is at the bottom of the file after the html.

Answer 1

You should use the change event for the list (not mouseout) and instead of having that callback function call setRadius, just place all of that code into the callback.

Also, the code can be much simpler than you have it because in a DOM event handler, this refers to the DOM element. So you just need to get this.value.

// 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");
 }
 });
 
});

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

• Scott Marcus: @steady_progress if you have two elements with the same ID and then you query for the element, the first one found is the one that will be used. No two elements should ever have the same ID. Glad you found your issue. Please up vote all answers that were helpful and consider marking my answer (the one you wound up using) as the answer.

Answer 2

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>

It looks like your code is working here in this snippet. Try wrapping your javascript in the following:

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

I suspect you are trying to attach the mouseout event handler to #radius before the DOM has fully loaded. Doing this in $(document).ready() will wait for the DOM to fully load before executing your code.

• steady_progress: thank you for your answer ... I made the change (see updated question above .... but for some reason it still doesn't work)
• steady_progress: in the console I get error message "undefined" (see Update 2) ... I just don't get it
• Scott Marcus: @steady_progress Are you sure you have JQuery properly referenced? And, if you click over on the line number that's part of the error, what line does it take you to?
• steady_progress: query is properly referenced ... I also have a lot of other query code in there and everything else works fine ... the line number is that of the console.log()statement
• Ryan Tuosto: @steady_progress then I'm guessing you had another element on your page with id="radius"