Привет, я пытаюсь добавить текстовые поля, соответствующие выбору пользователя в выбранном входе. В идеале, если пользователь выбирает параметр со значением "created_at", текстовое поле ввода должно быть создано внутри div "search_input_div", которое поначалу является просто пустым div.
************* Edit - Что-то я забыл упомянуть **********
Выбор "search_column_select" создается другой кнопкой. Таким образом, он не существует, когда страница загружается, я не уверен, как это повлияет на функциональность.
************* Конец редактирования *****
По какой-то причине ничего не происходит, поэтому я использую следующий код:
JS
$('#search_column_select').change(function(){
if($("#search_column_select").val() == 'created_at'){
$('#search_input_div').html("<input class='search_input' placeholder='(YYYY-MM-DD) or (YYYY-MM)'/>");
}
});
И на всякий случай это имеет значение HTML:
HTML:
<div class="search_box" id="search_column_div">
<select id='search_column_select'>
<option value='select'>search by...</option>
<option value='created_at'>by date created</option>
<option value='street_address'>by street address</option>
</select>
</div>
<div id="search_input_div">
<!-- Search_input text field goes here -->
</div>
Если кто-нибудь может указать, где я ошибся или как исправить это, я бы очень признателен! Благодарю!
Убедитесь, что вы добавили код javascript, когда документ готов.
$(function(){
$('#search_column_select').change(function(){
if($("#search_column_select").val() == 'created_at'){
$('#search_input_div').html("<input class='search_input' placeholder='(YYYY-MM-DD) or (YYYY-MM)'/>");
}
});
});
Это делается для добавления добавления события jQuery в $(function(){...});
поэтому теперь, когда ваш документ готов и search_column_select
существует, ваш javascript будет запущен.
Поскольку он создается динамически, вам нужно либо добавить слушателя change
после его создания, либо использовать делегирование событий следующим образом:
$(document).on('change', '#search_column_select', function(){
if($("#search_column_select").val() == 'created_at'){
$('#search_input_div').html("<input class='search_input' placeholder='(YYYY-MM-DD) or (YYYY-MM)'/>");
}
});
Вместо document
вы также можете добавить прямой родительский '#search_column_select'
.
Вы должны поместить jQuery в готовый документ:
$( document ).ready(function() {
$('#search_column_select').change(function(){
if($("#search_column_select").val() == 'created_at'){
$('#search_input_div').html("<input class='search_input' placeholder='(YYYY-MM-DD) or (YYYY-MM)'/>");
}
});
});