如何使用 jQuery 监听多个 HTML 选择答案

【问题标题】：How to listen for more than one HTML select using jQuery如何使用 jQuery 监听多个 HTML 选择
【发布时间】：2017-06-05 03:01:37
【问题描述】：

我有多个选择的 html 标签（现在基本上是 3 个），我想使用 Ajax 请求使用选择的值**（一组 html 选择的标签）过滤我的表...

ex) 使用 Gender 、 Location 、 Season 过滤

我的问题是如何做到这一点，同时不为每个选择标签复制我的代码？

【问题讨论】：

你做了什么？

标签： jquery html ajax select

【解决方案1】：

您可以使用以下代码实现它。

$("select").change(function(){
   var location = $("LOCATION_SELECTOR").val(); //selector using ID/Class/Name
   var gender= $("GENDER_SELECTOR").val();
   var season= $("SEASON_SELECTOR").val();


   $.ajax(...) // use above 3 values to post the data.
});

【讨论】：

【解决方案2】：

您可以为任何下拉更改执行一个 ajax：

$("select").on('change',function (){
  var selectedValue = $(" :selected").val();
  ajax({
    // Do post for submitting the value
  });
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

这样做，您可以更改您拥有的任何选择，但只发布一项更改。这也可以帮助您避免重复选择的域代码进行发布。

【讨论】：

【解决方案3】：

使用 javascript array.sort() 对元素进行排序，参考 MDN

【讨论】：

【解决方案4】：

试试这个代码。

$(function() {
    $('#fruits').change(function(e) {
        var selected = $(e.target).val();
        console.dir(selected);
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="true" id="fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="mango">Mango</option>
    <option value="grape">Grape</option>
    <option value="watermelon">watermelon</option>
</select>

【讨论】：

感谢你们所有的时间和精力：）...我发现@K D 的答案...解决了我的问题，所以我会给他功劳^_^，