On select change, get option value

Question

I have seen numerous questions on this which give similar answers, namely these:

However, when following the approaches they are, it does nothing for me?

$(function() {
  $('.blogFilter__form').on('change', function(){
    // location.href = $(this).val();
    console.log($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="blogFilter__form">
  <select class="blogFilter__select">
    <option class="blogFilter__option" value="">Topics</option>
    <option class="blogFilter__option" value="/topics/how-to/">How to</option>
    <option class="blogFilter__option" value="/topics/news/">News</option>
  </select>
</form>

What I'm trying to do is redirect user based on what option value is selected.

Currently, running console.log($(this).val()); logs nothing for me?

Have you tried `$('.blogFilter__select')` instead of `$('.blogFilter__form')` — Sudhir Ojha, Jun 15 '21 at 10:16

Alvie Mahmud · Accepted Answer · 2021-06-15T10:35:13.427

It is because you have the change event listener on the form itself rather than on the select. If you change the function to listen for the .blogFilter__select being changed it should work:

$(function() {
  $('.blogFilter__select').on('change', function(){
    // location.href = $(this).val();
    console.log($(this).val());
  });
});

Previously you were logging the 'value' of the form, which is empty, rather than the value of the select.

Just a further, somewhat unrelated point. You should probably use id instead of class for this type of function. The reason I say this, is that if you have multiple selects in the same form. You can use class="blogFilter__select" to style them, but if you want to listen for a change like this, it may not behave as you intend it to.

I have also added an additional way you could log the select value when the form changes, if that is what you wanted. (It is commented out though so uncomment it and play around with it if you want to use it)

// Function only listens on pageSelect
// (use # instead of . to choose id instead of class)
// test with .blogFilter__select and you'll see it logs both
$(function() {
  $('#blogFilter__pageSelect').on('change', function() {
    console.log($(this).val());
  });
});

// Alternatively, if you wanted to listen for whenever the form was changed, but log the value of the select, you can do it by using the id of the select instead of 'this':
// $(function() {
//   $('#blogFilter__form').on('change', function() {
//     console.log($('#blogFilter__pageSelect').val());
//   });
// });

/* style affects both <select>s*/
.blogFilter__select {
  display: block;
  margin-bottom: 1em;
  color: red;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="blogFilter__form" class="blogFilter__form">
  <select id="blogFilter__pageSelect" class="blogFilter__select">
    <option class="blogFilter__option" value="">Topics</option>
    <option class="blogFilter__option" value="/topics/how-to/">How to</option>
    <option class="blogFilter__option" value="/topics/news/">News</option>
  </select>
  <select id="blogFilter__secondSelect" class="blogFilter__select">
    <option class="blogFilter__option" value="1">One</option>
    <option class="blogFilter__option" value="2">Two</option>
    <option class="blogFilter__option" value="3">Three</option>
  </select>
</form>

score 0 · Answer 2 · answered Jun 15 '21 at 10:15

If you log $this, you can see that it's the blogfilter__form which has no value. Use the event to get the target value instead.

$(function() {
  $('.blogFilter__form').on('change', function(e){
    console.log(e.target.value);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="blogFilter__form">
  <select class="blogFilter__select">
    <option class="blogFilter__option" value="">Topics</option>
    <option class="blogFilter__option" value="/topics/how-to/">How to</option>
    <option class="blogFilter__option" value="/topics/news/">News</option>
  </select>
</form>

On select change, get option value

2 Answers2