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); 
    } 
}); 

Html после Jquery кода вызывается перед представить:

<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> 

UPDATE

COMPA ny.rb

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

Это подтверждает, если данное значение nil или опустошить как ("", " "). Странно, так как если я выберу любой из исходных параметров, например < $100k, тогда проверка пройдет.

Answer 1

Вместо изменения выбранного атрибута вы можете попытаться изменить выбор из непосредственно

заходящего selectedIndex до последнего индекса вашего списка выбора с помощью .prop

См Демо: https://jsfiddle.net/7da197j4/1/

Answer 2

I нашел это решение. Возможно, это не самое лучшее, но работает:

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