将函数应用于数组中的所有项目？

Question

我有一个使用 foreach 循环创建的 id 列表。我正在使用 jquery 脚本根据另一个下拉框的值更改下拉框的值。我正在尝试更改脚本，使其适用于所有项目，而不是单独应用。

我尝试了 for 循环和各种通配符 - 我觉得它应该很容易，但我就是无法让它工作。

<script>
$(function() {
  $("#changeall").change(function() {
    $("#item1").val($(this).val());
    $("#item2").val($(this).val());
    $("#item3").val($(this).val());
  });
});
</script>

这可行，但它只是希望它适用于#item*，这样我就不必全部列出。

非常感谢。

根据请求，随附的下拉菜单：

<?php 
$ii = 1;
foreach ($trails as $trail): ?>
            <h4><?= htmlspecialchars(trail->getAttribute("name")) ?></h4>
              <select name="trailstatusform[]" id="item<?= htmlspecialchars($ii) ?>" class="bww">
                <option selected value="<?= htmlspecialchars($trail->getAttribute("status")) ?>">
                  <?= htmlspecialchars($trail->getAttribute("status")) ?>
                </option>
                <option value="OPEN">OPEN</option>
                <option value="CLOSED">CLOSED</option>
              </select>
<?php 
$ii++;
endforeach; ?>   

<select id="changeall">
  <option value=" "> </option>
  <option value="OPEN">OPEN</option>
  <option value="CLOSED">CLOSED</option>
</select>

Answer 1

您可以在id 属性上使用each 和通配符选择器(^=)，或者使用class 属性选择：

$('#changeall').change(function () {
    var value = $(this).val();
    $("[id^=item]").each(function() { 
        $(this).val(value);
    });
    // or, class-based (this is the preferred way)
    $("select.bww").each(function() { 
        $(this).val(value);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br>Items:<br>
<select name="trailstatusform[]" id="item1" class="bww">
    <option selected value="status">status</option>
    <option value="OPEN">OPEN</option>
    <option value="CLOSED">CLOSED</option>
</select><p>
<select name="trailstatusform[]" id="item2" class="bww">
    <option selected value="status">status</option>
    <option value="OPEN">OPEN</option>
    <option value="CLOSED">CLOSED</option>
</select>
<hr>

<br>Change all:<br> 
<select id="changeall">
  <option value=" "> </option>
  <option value="OPEN">OPEN</option>
  <option value="CLOSED">CLOSED</option>
</select>

Answer 2

因此，使用它们各自通用的类并设置值。

$("#changeall").on("change", function(){
   $(".bww").val(this.value)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="bww">
  <option value=" "> </option>
  <option value="OPEN">OPEN</option>
  <option value="CLOSED">CLOSED</option>
</select>

<select class="bww">
  <option value=" "> </option>
  <option value="OPEN">OPEN</option>
  <option value="CLOSED">CLOSED</option>
</select>

<select class="bww">
  <option value=" "> </option>
  <option value="OPEN">OPEN</option>
  <option value="CLOSED">CLOSED</option>
</select>

<hr/>

<select id="changeall">
  <option value=" "> </option>
  <option value="OPEN">OPEN</option>
  <option value="CLOSED">CLOSED</option>
</select>