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

Question

我正在寻找一种方法来更改 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

解决了这个问题，在这里发布给其他有这个问题的人。 基本上我放弃了 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)
  }

Answer 2

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

长答案：

根据JQuery docs，.hide() 实际上并没有禁用输入，它只是用 CSS 隐藏它。与.show() 和looks like 相同。所以你需要为此使用不同的方法。稍后会详细介绍。

其次，之所以只发送第二个选择框output2，可能是因为它们都设置为<%= form.select :output %>。根据Rails docs 的说法，在后台，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()
      }
    }

如果您使用的是 Stack Overflow Answer 使用 $("input").attr('disabled','disabled');。