使用jQuery，我如何处理页面上的多个选择元素？

debugcn 发表于 Dev

若望

我在页面上有多个选择元素。我遇到的问题是，当我检索特定多选元素的选定值时，会从页面上的所有多选元素中获取选定的值。

我的代码如下：

HTML部分：

```<table class="table" id="LodgeData1" class="LodgeDataTable">
    <tr>
        <td>
            <select name="all_activities" class="all_activities" multiple="">
                <option value="1" data_ls_adults_price="0">Horseback riding </option>
                <option value="2" data_ls_adults_price="0">Horseback riding</option>
                <option value="3" data_ls_adults_price="0">2h sundowner scenic drive</option>
                <option value="4" data_ls_adults_price="332">Game Drive Re</option>
                <option value="5" data_ls_adults_price="1000.00">Scenic Flight &amp; Dune Boarding 22</option>
            </select>
        </td>
    </tr>
</table>
<table class="table" id="LodgeData2" class="LodgeDataTable2">
    <tr>
        <td>
            <select name="all_activities" class="all_activities" multiple="">
                <option value="1" data_ls_adults_price="0">Horseback riding </option>
                <option value="2" data_ls_adults_price="0">Horseback riding</option>
                <option value="3" data_ls_adults_price="0">2h sundowner scenic drive</option>
                <option value="4" data_ls_adults_price="332">Game Drive Re</option>
                <option value="5" data_ls_adults_price="1000.00">Scenic Flight &amp; Dune Boarding 22</option>
            </select>
        </td>
    </tr>
</table>```

jQuery Part: 

```$("body").on("change",".all_activities", function(){
      var table_id = $(this).parents('table').attr('id');
      var arr = [];
      var x=0;
      $('.all_activities > option:selected').each(function(){
        var activity_price = $(this).attr("data_ls_adults_price");
        var activity_name = $(this).text();
        x += parseInt($(this).attr("data_ls_adults_price"));
        var activities = activity_name;
        arr.push(activities);
        console.log(arr);
      });
      var x_activities = "Total Cost: "+x;
      $('#'+table_id).find('.Price_Activities_List').html(arr);
      $('#'+table_id).find('.Price_Activities_Price').html(x_activities);
    });```

因此，如果我在表“＃LodgeData2”下选择“选项1和2”，在表“＃LodgeData2”下选择选项5，则“选项1和2”也将显示为表“＃LodgeData2”下的值的一部分。

如何分别检索多选元素的值？

阿里·谢库普尔

$('.all_activities > option:selected')是一个类选择器，并选择具有特定类的所有元素（然后选择它们）。您可以$(event.target)通过将事件传递给函数来将选择范围缩小到事件目标：

$("body").on("change",".all_activities", function(event){
      var table_id = $(this).parents('table').attr('id');
      var arr = [];
      var x=0;
      $(event.target).find("option:selected").each(function(){
        var activity_price = $(this).attr("data_ls_adults_price");
        var activity_name = $(this).text();
        x += parseInt($(this).attr("data_ls_adults_price"));
        var activities = activity_name;
        arr.push(activities);
        console.log(arr);
      });
      var x_activities = "Total Cost: "+x;
      $('#'+table_id).find('.Price_Activities_List').html(arr);
      $('#'+table_id).find('.Price_Activities_Price').html(x_activities);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="LodgeData1" class="LodgeDataTable">
    <tr>
        <td>
            <select name="all_activities" class="all_activities" multiple="">
                <option value="1" data_ls_adults_price="0">Horseback riding </option>
                <option value="2" data_ls_adults_price="0">Horseback riding</option>
                <option value="3" data_ls_adults_price="0">2h sundowner scenic drive</option>
                <option value="4" data_ls_adults_price="332">Game Drive Re</option>
                <option value="5" data_ls_adults_price="1000.00">Scenic Flight &amp; Dune Boarding 22</option>
            </select>
        </td>
    </tr>
</table>
<table class="table" id="LodgeData2" class="LodgeDataTable2">
    <tr>
        <td>
            <select name="all_activities" class="all_activities" multiple="">
                <option value="1" data_ls_adults_price="0">Horseback riding </option>
                <option value="2" data_ls_adults_price="0">Horseback riding</option>
                <option value="3" data_ls_adults_price="0">2h sundowner scenic drive</option>
                <option value="4" data_ls_adults_price="332">Game Drive Re</option>
                <option value="5" data_ls_adults_price="1000.00">Scenic Flight &amp; Dune Boarding 22</option>
            </select>
        </td>
    </tr>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。