Jquery 读取编号组中选择下拉列表的数组

Jquery Read Array of Select Dropdowns in Numbered Group

本文关键字：下拉列表 数组 选择 读取 编号 Jquery      更新时间：2023-09-26

我有一组选择下拉列表，如下所示：

<select name="item[1]">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<select name="item[2]">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<select name="item[3]">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<select name="item[4]">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>

我正在尝试使用Jquery解析它们。 名称中的数字由数据库中项目的 ID 号填充。 我基本上想解析每一个，如果是肯定的，那么使用 ID 从数据库中获取项目的价格来计算总数。 这在Jquery上可能吗？ 我可以毫无问题地完成其余代码，我只需要帮助解析所有item并返回每个代码的值和 ID。

我会使用 jQuery 属性以选择器开头，并与 .map() 结合使用以获取所选项目的列表。

下面是一个可运行的代码段，它在单击按钮后返回所选项的数组。由您来获取商品 ID 并生成您的价格。

$("button").on("click", function() {
  var ids = $('select[name^="item"]').map(function() {
    if ($(this).val() === "Yes")
      return this.name.replace(/'D/g,'');
    else 
      return null;
  }).toArray();
  
  alert(ids);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="item[1]">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<select name="item[2]">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<select name="item[3]">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<select name="item[4]">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<button>Get Price</button>

这是一个完整的示例(getIds方法是您想要的部分(

function getIds(){
  var selected = $('select[name^="item["]').filter(function(){
    return this.value == 'Yes';
  }).map(function(){
    return this.name.match(/'d+/);
  });
  return selected.get();
}
// just for display purposes
// you should call the getIds() method when you need to..
$('select').change(function(){
  var ids = getIds();
  $('.results').text( ids );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="item[1]">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<select name="item[2]">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<select name="item[3]">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<select name="item[4]">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<div class="results"></div>

我还没有测试过，但你可以尝试这样的事情：

$("select[name^='item']").each(function(){
console.log($(this).attr("name") + ": " + $(this).find(":selected").attr("value"));
});

稍作调整，您可以将其转换为键值对，然后，如果我正确理解了这个问题，可能会使用eval()来获得所需的值。

相关文章：