一旦以Rails的形式选择了其他下拉菜单，则禁用下拉菜单选项

Question

I'm trying to create a form that has a list of dropdowns that each use the same options; however I'd like for each option to only be selected once. How can I achieve this?

Here is the general code for the form that I would like:

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

Obviously this doesn't prevent the options from being selected multiple times.

How can I alter this code to prevent the selection of the same option multiple times?

Answer 1

Use javascript . Attach an change event handler to all of the select elements in the page. When activated, this event sets all lists to the default value, except the one being changed.
Or it checks if the other values are the same as the current one you are selecting and alerts the user.
Or you can validate this in the backend. When you submit the form, check if there are values repeating, and throw an error to the user.

$(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.
});

Or the second option:

$(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.
});

Not beautiful, but effective.
For the third option, you should look to custom validations in Rails.