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:

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:

WHY? I just don't understand.

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. — James
– James, Commented Jul 20, 2017 at 18:44
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. — aalcutt
– aalcutt, Commented Jul 20, 2017 at 18:45

Scott Marcus · Accepted Answer · 2017-07-20 18:46:16Z

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>

answered Jul 20, 2017 at 18:46

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scott Marcus Over a year ago

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

Ryan Tuosto · Accepted Answer · 2017-07-20 18:42:36Z

1

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.

answered Jul 20, 2017 at 18:42

Ryan Tuosto

1,95115 silver badges23 bronze badges

7 Comments

steady_progress Over a year ago

thank you for your answer ... I made the change (see updated question above .... but for some reason it still doesn't work)

steady_progress Over a year ago

in the console I get error message "undefined" (see Update 2) ... I just don't get it

Scott Marcus Over a year ago

@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 Over a year ago

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 Over a year ago

@steady_progress then I'm guessing you had another element on your page with id="radius"

|

Collectives™ on Stack Overflow

choice in html dropdown menu not recognised by javascript code

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related