Trying to navigate to page location when selecting option from select options dropdown-CodePudding

so I have a select box like this with more elements being loaded in of course.

<select >
   <option  value="#cherry_'.$rownum.'">'.$name.'</option>
</select>

And. I'm trying to use javascript to take me to the appropriate page location based off the value attribute in the option.

$('.cherry-dropdown').click(function(){
   console.log("yes");

   $('.cherryOption').click(function(){
      console.log("maybe");
      window.location=$(this).val();
   });
});

I'm getting yes from the first console.log (opening the select box to reveal the options). But when I click an option I'm not getting the maybe console.log, and thus the window.location part isn't working as well.

What am I doing wrong here...

CodePudding user response：

You only actually need one event listener here, if you target the select menu itself (.cherry-dropdown) and listen for a change event instead of click, and then by passing the event as a argument to access it's value.

$(".cherry-dropdown").change(function (e) {
    console.log(e.target.value); //Returns the selected options value
    window.location = $(this).val();
});