时间戳

首页 > 解决方案 > Rails 表单 - 通过 JavaScript 根据另一个选定选项更改选择选项

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

问题描述

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

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

<%= 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 字段。

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

标签： javascripthtmljqueryruby-on-rails

解决方案

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

推荐阅读