禁用在Rails窗体中的其他下拉列表中选择的下拉选项

Question

我正在尝试创建一个表单，其中包含一个下拉列表，每个下拉列表都使用相同的选项；但是，我希望每个选项只被选中一次。我怎样才能做到这一点？

这是我想要的表格的通用代码：

    <div id="form">
    <%= form_for :character, url: characters_path do |f| %>
      <p>
        <%= f.label :first_stat, "First Stat: " %>
        <%= f.select :first_stat, options_for_select([" ","strength","dexterity","constitution","intelligence","wisdom","charisma"], disabled: " ", selected: " ") %>
      </p>

      <p>
        <%= f.label :second_stat, "Second Stat: " %>
        <%= f.select :second_stat, options_for_select([" ","strength","dexterity","constitution","intelligence","wisdom","charisma"], disabled: " ", selected: " ") %>
      </p>  

      <p>
        <%= f.label :third_stat, "Third Stat: " %>
        <%= f.select :third_stat, options_for_select([" ","strength","dexterity","constitution","intelligence","wisdom","charisma"], disabled: " ", selected: " ") %>
      </p>  

      <p>
        <%= f.label :fourth_stat, "Fourth Stat: " %>
        <%= f.select :fourth_stat, options_for_select([" ","strength","dexterity","constitution","intelligence","wisdom","charisma"], disabled: " ", selected: " ") %>
      </p>                  

      <p>
        <%= f.label :fifth_stat, "Fifth Stat: " %>
        <%= f.select :fifth_stat, options_for_select([" ","strength","dexterity","constitution","intelligence","wisdom","charisma"], disabled: " ", selected: " ") %>
      </p>                  

      <p>
        <%= f.label :sixth_stat, "Sixth Stat: " %>
        <%= f.select :sixth_stat, options_for_select([" ","strength","dexterity","constitution","intelligence","wisdom","charisma"], disabled: " ", selected: " ") %>
      </p>                  
      <p>
        <%= f.submit %>
      </p>
    <% end %>
</div> <!-- END OF FORM -->

显然，这并不能防止多次选择这些选项。

如何更改此代码以防止多次选择相同的选项？

Answer 1

使用javascript。将change事件处理程序附加到页面中的所有select元素。激活时，此事件将所有列表设置为默认值，但要更改的列表除外。

或者，它检查其他值是否与您选择的当前值相同，并通知用户。

或者您可以在后端验证这一点。提交表单时，请检查是否存在重复值，并向用户抛出错误。

$(function() {
  $("#first_stat").on("change", function() {
    $("#second_stat").val("");
    $("#third_stat").val("");
    $("#fourth_stat").val("");
    $("#fifth_stat").val("");
    $("#sixth_stat").val("");
  });
  // Attach the event to the rest of them.
});

或者第二种选择：

$(function() {
  $("#first_stat").on("change", function() {
    if ($("#second_stat").val() === $(this).val()) {
      $(this).val("");
      alert("Value is the same as Second Stat!")
    }
    // Go on
  });
  // Attach the event to the rest of them.
});

不漂亮，但很有效。

对于第三个选项，您应该查看Rails中的自定义验证。