当我克隆多个下拉列表时如何在 jQuery 中获取多个下拉列表值

Question

当我单击按钮克隆工作但它只显示一个下拉列表值我想获得值克隆多个下拉列表并显示警报框有我的代码

 $(document).ready(function() { $('#btnid').click(function() { $('#idcuntry').clone().attr('id', 'id_' + $(this).index()).insertAfter('#idcuntry'); var a = $('#idcuntry').val(); alert(a); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="idcuntry"> <option value="10">Selection </option> <option value="20">Pa </option> <option value="30">India </option> </select><br/> <input type="button" value="clone" id="btnid">

Answer 1

第一个问题是您获得了#idcuntry的值，并且只有一个具有此 ID（这很好，ID 应该是唯一的，因此您做出了更改克隆 ID 的正确选择）。

要定位多个元素，您可以向它们添加 class ，例如class="countryselect" 。

然后， .val()将只返回第一个元素的值。 但是您可以使用.map()将它们全部放在一个数组中：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $('#btnid').click(function() { $('#idcuntry').clone().attr('id', 'id_' + $(this).index()).insertAfter('#idcuntry'); var a = $('.countryselect').map(function() { return $(this).val(); }).get(); alert(a); }); }); </script> <select id="idcuntry" class="countryselect"> <option value="10">Selection </option> <option value="20">Pa </option> <option value="30">India </option> </select><br/> <input type="button" value="clone" id="btnid">