在选择更改时，获取选项值答案

【问题标题】：On select change, get option value在选择更改时，获取选项值
【发布时间】：2021-06-15 10:10:02
【问题描述】：

我已经看到很多关于此的问题给出了类似的答案，即：

但是，当遵循他们的方法时，它对我没有任何帮助？

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

我要做的是根据选择的 option 值重定向用户。

目前，运行 console.log($(this).val()); 对我没有任何记录？

【问题讨论】：

你试过$('.blogFilter__select')而不是$('.blogFilter__form')

标签： javascript html jquery

【解决方案1】：

这是因为您在表单本身而不是在选择上有更改事件侦听器。如果您更改函数以侦听正在更改的.blogFilter__select，它应该可以工作：

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

之前您记录的是表单的“值”，它是空的，而不是选择的值。

只是更进一步，有点不相关的观点。对于这种类型的函数，您可能应该使用 id 而不是 class。我这样说的原因是，如果您在同一个表单中有多个选择。你可以使用class="blogFilter__select" 来设置它们的样式，但是如果你想监听这样的变化，它可能不会像你想要的那样运行。

我还添加了另一种方法，您可以在表单更改时记录选择值，如果这是您想要的。（它已被注释掉，但如果你想使用它，请取消注释并玩弄它）

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

【讨论】：

【解决方案2】：

如果您记录 $this，您可以看到它是 blogfilter__form 没有任何价值。改为使用事件获取目标值。

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

【讨论】：