javascript - jquery 添加新的选择选项并将数据发送到服务器

Question

我对收入字段进行了验证。如果我在未调用 jquery 代码时运行代码，则提交表单时不会出现任何验证问题。

但是，如果用户在第一个选择中选择“无收入”选项，则 jquery 将被调用并生成新的 $0在第二个选择表单中插入并选择。如果我检查新的 HTML 代码，一切看起来都不错(新选项已存在并已选中)，但在提交时会引发“收入不能为空错误”。因此，由于某种原因，当验证运行时，它认为该字段为空。

我猜这与我的 jQuery 代码有关。我该如何解决这个问题？

表单(用于显示原始选择选项)

    <div class="form-group">
      <div><%= f.label :revenue_type, "Revenue Type" %></div>
      <%= f.select :revenue_type, ["recurring revenue", "non-recurring revenue", "no revenue"],
        { :selected => "recurring revenue" }, { "data-behavior" => "revenue-type-select", class: "form-control" } %>
    </div>

    <div class="form-group">
      <div><%= f.label :revenue %></div>
      <%= f.select :revenue, ["< $100k", "$100k < $1M", "> $1M"], {},
        { "data-behavior" => "revenue-number-select", class: "form-control" } %>
    </div>

jquery

$(document).on('change', '[data-behavior="revenue-type-select"]', function (event) {
  if ($(this).val() === "no revenue") {
    $('[data-behavior="revenue-number-select"]').append(new Option("$0", "$0"));
    $('[data-behavior="revenue-number-select"] option[value="$0"]').attr("selected", "selected").change();
    $('[data-behavior="revenue-number-select"]').prop("disabled", true);
  } 
  else {
    $('[data-behavior="revenue-number-select"] option[value="$0"]').remove();
    $('[data-behavior="revenue-number-select"]' ).prop("disabled", false);
  }
});

提交前调用 jquery 代码后的 HTML:

<select data-behavior="revenue-number-select" class="form-control" name="company[revenue]" id="company_revenue" disabled="">
  <option value="< $100k">< $100k</option>
  <option value="$100k < $1M">$100k < $1M</option>
  <option value="> $1M">> $1M</option>
  <option value="$0" selected="selected">$0</option>
</select>

更新

公司.rb

validates :revenue, presence: { message: "can't be blank" }

这将验证给定值是否为 nil或空如 ("", " ") 。这很奇怪，因为如果我选择任何原始选项，例如 < $100k然后验证通过。

Answer 1

您可以尝试直接更改选择，而不是更改所选属性

使用.prop将selectedIndex设置为选择列表的最后一个索引

查看演示:https://jsfiddle.net/7da197j4/1/