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

您可以在each属性上使用^=和通配符选择器（id），也可以使用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>

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

2 个答案: