Question

我对收入字段进行了验证。如果我在调用jquery代码时运行代码，那么表单会在没有任何验证问题的情况下提交。

但是如果用户选择＆＃34;没有收入＆＃34;在第一个选择中的选项然后调用jquery，新的$0被插入并在第二个选择表单中被选中。如果我查看新的HTML代码，一切看起来都不错（新选项在那里并被选中），但在提交时它会提出＆＃34;收入不能是空白错误＆＃34;。因此，出于某种原因，当验证运行时，它认为该字段为空。

我想这与我的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>

更新

company.rb

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

这会验证给定值是nil还是空("", " ")。这很奇怪，因为如果我选择< $100k之类的任何原始选项，那么验证就会通过。

Answer 1

您可以尝试直接通过

更改选择的属性，而不是更改所选属性

使用selectedIndex

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

请参阅演示：https://jsfiddle.net/7da197j4/1/

Answer 2

我找到了这个解决方案。也许这不是最好的但是有效：

$(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");
    $('[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);
  };
});

$(document).on('bind', '[data-behavior="company-form"]', function (event) {
  $(this).find('[data-behavior="revenue-number-select"]').prop("disabled", false);
});

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

2 个答案: