Добавить новую форму на основе данных другой формы?

Question

У меня есть выпадающее меню, которое позволяет пользователю выбрать период времени (то есть: январь 2018, 1-й триместр, лето 2018 и т. Д.). В самом низу есть опция с надписью «Другое». Как я могу сделать так, чтобы, если пользователь выбрал «Другое», и под ним появилась форма для ввода текста, чтобы они могли уточнить, что означает «Другое»? Вот мой текущий код:

HTML:

Time Period:
<% if f.object.award.add_period? %>
    <div class="time_period_<%= f.object.award.id %>" id="otherBoolID">
        <%= f.select :time_period, Award::TimePeriods, {:include_blank => true}, { :class => "date_dropdown"} %>
    </div>
<% end %>

<div  id="boolID" <%= "hidden" %>>
    <%= f.input :time_period, :label => false, placeholder: "Other (please specify)", :input_html => { :class => 'awardform' } %>
</div>

JavaScript / JQuery:

$('#otherBoolID').change(function () {
var x = document.getElementById('otherBoolID').value;
if (x == "Other") {
    document.getElementById('boolID').style.display = 'visible';
}
});

Есть идеи, что не так? В настоящее время «другая» форма скрыта при загрузке страницы, но не становится видимой, если вы выберете «Другое» в раскрывающемся меню. Если это стоит упомянуть, я работаю с ruby ​​на платформе rails.

Answer 1

Может ли быть проблема в том, что id="otherBoolID" находится на теге <div>, а не <select>?