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>

更新

company.rb

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

這將驗證給定的值是否為nil或為空，例如("", " ") 。 這很奇怪，因為如果我選擇任何原始選項，例如< $100k那么驗證就會通過。

Answer 1

除了嘗試更改所選屬性外，您還可以嘗試直接更改

使用.prop將selectedIndex設置為選擇列表的最后一個索引

參見演示： 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);
});