如果选择字段，则从组中获取所有选定的选项

Posted 2023-05-09

【中文标题】如果选择字段，则从组中获取所有选定的选项

【英文标题】：Get all selected options from a group if select-fields

【发布时间】：2016-03-29 14:55:49

【问题描述】：

我有多个名称为 group

的选择字段

<select name="group[1]" onChange="showMeAllSelectedGroups(); return false;">
    <option value="46">Rot</option>
    <option value="1">Blau</option>
</select>


<select name="group[6]" onChange="showMeAllSelectedGroups(); return false;">
    <option value="a">a</option>
    <option value="b">b</option>
</select>

现在我需要从每个选择字段中获取所有选定的选项，当其中一个被更改时。

function showMeAllSelectedGroups()     
    $("select").each(function()        
        alert($(this).val());
    ); 

这很好用，但我给了我页面上每个选择字段的值，我只需要选择名称为 group

的选择字段的选定选项

这不起作用：

function showMeAllSelectedGroups()     
    $("select[name='group']").each(function()        
        alert($(this).val());
    ); 

我做错了什么？

【问题讨论】：

您选择名称为"group[1]" 和"group[6]"，其中使用name='group'，我想您正在寻找$("select[name^='group']")

【参考方案1】：

正如其他人建议的那样，您需要以运算符^ 开头，但要从name 获取数字，您可以使用正则表达式/group\[(\d+)\]/:-

function showMeAllSelectedGroups() 
  $("select[name^='group']").each(function() 
    var number = /group\[(\d+)\]/.exec(this.name)[1];
    $('body').append("<div>group number = " + number + "</div>");
    $('body').append("<div>select value = " + $(this).val() + "</div>");
  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="group[1]" onChange="showMeAllSelectedGroups(); return false;">
  <option value="46">Rot</option>
  <option value="1">Blau</option>
</select>


<select name="group[6]" onChange="showMeAllSelectedGroups(); return false;">
  <option value="a">a</option>
  <option value="b">b</option>
</select>

【参考方案2】：

它不起作用的原因是，select[name='group'] 是错误的选择器，指向名称为 group[1] 和 group[6] 的目标元素。 select[name='group'] 只会查找具有 name=group 的元素

你可以使用以选择器开头的属性：

$("select[name^='group[']").each(function()        
    alert($(this).val());
); 

【讨论】：

还有一个问题.. 有没有办法找出 group[] 的索引？ ...我的意思是 group[6] 的 6 ？

【参考方案3】：

你需要使用 start with selector https://api.jquery.com/attribute-starts-with-selector/

function showMeAllSelectedGroups()     
    $("select[name^='group']").each(function()        
        alert($(this).val());
    ); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="group[1]" onChange="showMeAllSelectedGroups(this); return false;">
    <option value="46">Rot</option>
    <option value="1">Blau</option>
</select>


<select name="group[6]" onChange="showMeAllSelectedGroups(this); return false;">
    <option value="a">a</option>
    <option value="b">b</option>
</select>

【讨论】：

还有一个问题.. 有没有办法找出 group[] 的索引？ ...我的意思是 group[6] 的 6 ？