Rails 表单 - 通过 JavaScript 根据另一个选定选项更改选择选项

Question

我正在寻找一种方法，根据另一个选择字段的选定选项，通过 JavaScript 更改 rails form.select 字段中的选项。

我之前尝试这样做的方法是使用具有相同对象和不同选项集的两个单独字段，如下所示：

<%= form_with(model: my_model) do |form| %>

  <div class="form-floating" id="input">
    <%= form.select :input, ['a', 'b'], { }, class: "form-control" %>
    <%= form.label :input %>
  </div>

  <div class="form-floating" id="output1">
    <%= form.select :output, ['c', 'd'], { }, class: "form-control" %>
    <%= form.label :output %>
  </div>

  <div class="form-floating" id="output2">
    <%= form.select :output, ['e', 'f'], { }, class: "form-control" %>
    <%= form.label :output %>
  </div>

  <script>
    function onChange() {
      var selected = $('#input option:selected').text()
      if (selected == 'a') {
        $('#output1').show()
        $('#output2').hide()
      }
      if (selected == 'b') {
        $('#output1').hide()
        $('#output2').show()
      }
    }

    $('#input').change(onChange)
    $(window).on("turbolinks:load", onChange)
  </script>

  <%= form.submit class: "btn" %>
<% end %>

这种方法的问题是 :output 字段创建了两次，并且只提交了最后一个（id="output2"），所以我现在正在寻找一种方法来更改 onChange() 方法中的选择选项对于单个输出 form.select 字段。

对此问题或替代解决方案的任何帮助将不胜感激，干杯。

Answer 1

简短回答：使用$('#output-')prop('disabled', true); 而不是.hide() 。

长答案：

根据JQuery 文档， .hide()实际上并没有禁用输入，它只是用 CSS 隐藏它。 与.show()相同，它看起来像. 因此，您需要为此使用不同的方法。 稍后会详细介绍。

其次，只发送第二个选择框output2原因可能是因为它们都设置为<%= form.select :output %> 。 根据Rails 文档，在幕后，Rails 正在像这样设置这两个输入：

<select name="output"></select>

由于您有两个具有相同name属性的选择框，它们会相互覆盖。 这又是因为你使用.hide()和.show()所以他们实际上并没有被禁用。

我认为这适用于您的场景。 尝试使用$("output").prop('disabled', true); 像这样：

  function onChange() {
      var selected = $('#input option:selected').text()
      if (selected == 'a') {
        $('#output1').show()
        $('#output2').prop('disabled', true);
      }
      if (selected == 'b') {
        $('#output1').prop('disabled', true);
        $('#output2').show()
      }
    }

如果您使用的是 JQuery 版本 < 1.5，则可以使用$("input").attr('disabled','disabled'); 根据这个堆栈溢出答案。

Answer 2

问题解决了，贴在这里给其他遇到这个问题的人。 基本上我放弃了 rails 表单助手，转而使用标签构建 html 字符串，如下所示：

function replaceHTML() {
    var newHTML = '<select class="form-control" name="output" id="output">'

    var selection = $('#input option:selected').text()
    var options = selection == 'a' ? ['c', 'd'] : ['e', 'f']
    for (let i = 0; i < options.length; i++) {
      newHTML += '<option value=' + options[i] + '>' + options[i] + '</option>'
    }

    newHTML += '</select><label for="output">Output</label>'
    $('#output').html(newHTML)
  }