javascript - 利用 Javascript 将多个动态命名的下拉列表更改为一个值

Question

我试图调整这个例子来做我需要的。我有一个信息表，我希望在其中实现在单击按钮时将整列设置为相同值的选项。这可能吗？我喜欢正确的方向。

只是为了举例。假设我有一个为期 4 天的游戏派对，我正在计划页面看起来像这样。下拉菜单包含 3 个出席选项（是、否、可能）。每个下拉菜单都根据日期和人员动态命名。所以它看起来有点像我粗糙的 excel 模型。理想情况下，我希望在与日期标记相同的区域中有一个按钮，可以将给定日期的每个人从下拉列表中标记为“是”。

Answer 1

是的，这是完全可能的。如果您有权访问 html，则可以执行以下操作：

• 为每个单元格添加一个类，引用日期，因此“Day 1”列上的所有单元格（td 元素）都有一个名为“day1”的类，“Day 2”列上的所有单元格都有一个名为“day2”的类“ 等等。
• 添加您在“日”列标题中提到的按钮，并为它们提供与用于单元格的相同条件的 ID，因此“第 1 天”列的按钮将具有“第 1 天”的 ID，依此类推。然后你做类似下面的事情。

<script type="text/javascript">
$(document).ready(function() {
      $(".your-button-class").click(function() {
         var day_reference = $(this).attr("id");
         $("." + day_reference + " select").val(day_reference);
         return false;
        });
});
</script>

我假设两件事：

• 你正在使用 jQuery
• 下拉选项的值与您用于按钮的 Id 相同。

如果您没有使用 jQuery 或类似的 js 库，请告诉我们您正在做什么，我们可以为您提供帮助。

Answer 2

出色地。我建议使用 JQuery 来做这些事情——比如将很多下拉菜单设置为给定的值。

<script type='javascript'>
  $(document).ready(function() {
       $('select#setall').change(function() {
           $('.attendance').val($(this).val());
       });
  });
</script>

<select id="setall">
     <option>Yes</option>
     <option>No</option>
     <option>Maybe</option>
</select>


Day 1:
<select class="attendace">
     <option>Yes</option>
     <option>No</option>
     <option>Maybe</option>
</select>

Day 2:
<select class="attendace">
     <option>Yes</option>
     <option>No</option>
     <option>Maybe</option>
</select>

Day 3:
<select class="attendace">
     <option>Yes</option>
     <option>No</option>
     <option>Maybe</option>
</select>