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

Question

我试图调整this示例来做我需要的事情。我有一个信息表，我想要实现在按钮点击上将整个列设置为相同值的选项。这可能吗？我喜欢朝正确方向发展的一点。

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

Answer 1

是的，它完全可以实现。如果你有权访问html，你可以这样做：

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

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