Question

我有不同数量的名称组

的选择字段

<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());
    }); 
}

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

的选择字段的选项

这不起作用：

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

我做错了什么？

Answer 1

它不起作用的原因是，select[name='group']是一个错误的选择器，用于定位名为group[1]和group[6]的元素。 select[name='group']只会查找包含name=group

的元素

您可以使用选择器启用属性启动：

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

Answer 2

您需要使用选择器https://api.jquery.com/attribute-starts-with-selector/

开头

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

正如其他人所说，您需要使用运算符^启动，但要从name获取数字，您可以使用正则表达式/group\[(\d+)\]/： -

＆＃13;

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>");
  });
}

＆＃13;

<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>

＆＃13;

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

3 个答案: