Почему выбрано поле, которое не отображается?
Я пытаюсь добавить поле выбора обоими способами, сначала динамически и давая значения для выбора полей. при попытке динамически, поэтому он работает хорошо. но при попытке отобразить какое-либо поле выбора с помощью давая значение полю выбора '1st room child', поэтому в первый раз я получаю результат, но второй раз его не работает
$(function () {
/*here my values to increment whenever added newly form */
var i = 1;
i++;
var max_fields = 6;
var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
var this_is_field_wrapper = $(".this_is_field_wrapper");
//here we starting counting...
var input_count = 1;
//add buttong dynamically over here...
$(this_button_work_for_click_to_add_rooms).click(function (event) {
/* Act on the event */
if (input_count < max_fields) {
input_count++;
var add_fields = '<div><div class = "row"><div class = "form-group"><div class = "col-xs-1"><h6>Options -</h6><h6 class = "#">Adults(12+)</h6><select id = "selected_adults[]" name = "selected_adults[]" class = "form-control"><option value = "1">1</option><option selected = "selected" value = "2">2</option><option value = "3">3</option><option value = "4">4</option><option value = "5">5</option></select></div><!-- </div><div class = "form-group"> --><div class = "col-xs-1"><h6>' + input_count + ' Room</h6><h6 class = "m_label">Child(0-12)</h6><select id = "selected_childs[]" name = "selected_childs[]" onchange = "displayingNumberOfChildAge(this);" class = "form-control"><option>select</option><option id = "first_child_col" value = "1">1</option><option id = "second_child_col" value = "2">2</option></select></div><!-- </div><div class = "form-group"> --><div id = "childage0" class = "col-xs-1"><h6></h6></div><div id = "childage1" class = "col-xs-1"><h6></h6></div><a href = "javascript:void(0);" class = "remove_input_button" title = "Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
$(this_is_field_wrapper).append(add_fields);
}
});
$(this_is_field_wrapper).on('click', '.remove_input_button', function (e) {
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});
function addFields() {
var number = document.getElementById("selected_childs[]").value;
var childage = document.getElementById("childage0");
//Create array of options to be added
var array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
while (childage.hasChildNodes()) {
childage.removeChild(childage.lastChild);
}
if (number == 1) {
// statement
for (i = 0; i < number; i++) {
var h = document.createElement("h6");
h.setAttribute("id", "firstever");
var h1 = document.createElement("h6");
h1.appendChild(document.createTextNode("select child age"));
childage.appendChild(h1);
h.appendChild(document.createTextNode("Children Age " + (i + 1)));
childage.appendChild(h);
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
selectList.setAttribute("class", "form-control");
childage.appendChild(selectList);
childage.appendChild(document.createElement("br"));
//Create and append the options
for (var j = 0; j < array.length; j++) {
var option = document.createElement("option");
option.setAttribute("value", array[j]);
option.text = array[j];
selectList.appendChild(option);
}
}
} else {
// statement
for (i = 0; i < number; i++) {
childage = document.getElementById("childage" + i);
var h1 = document.createElement("h6");
h1.setAttribute("id", "secondever");
h1.appendChild(document.createTextNode("select child age"));
childage.appendChild(h1);
var h = document.createElement("h6");
h.appendChild(document.createTextNode("Children Age " + (i + 1)));
childage.appendChild(h);
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
selectList.setAttribute("class", "form-control");
childage.appendChild(selectList);
childage.appendChild(document.createElement("br"));
//Create and append the options
for (var j = 0; j < array.length; j++) {
var option = document.createElement("option");
option.setAttribute("value", array[j]);
option.text = array[j];
selectList.appendChild(option);
}
}
}
}<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form method = "POST" action = "<?php echo base_url(); ?>index.php/dynamically_added_controller/Dynamically/addingValues">
<div class = "this_is_field_wrapper">
<div class = "row">
<div class = "form-group">
<div class = "col-xs-1">
<h6>Options -</h6>
<h6 class = "#">Adults(12+)</h6>
<select id = "selected_adults[]" name = "selected_adults[]" class = "form-control">
<option value = "1">1</option>
<option selected = "selected" value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
</select>
</div>
<div class = "col-xs-1">
<h6>1st Room</h6>
<h6 class = "m_label">Child(0-12)</h6>
<select id = "selected_childs[]" name = "selected_childs[]" value = "" onchange = "addFields()" class = "form-control">
<option>--select--</option>
<option value = "1">1</option>
<option value = "2">2</option>
</select>
</div>
<div id = "childage0" class = "col-xs-1">
<h6></h6>
</div>
<div id = "childage1" class = "col-xs-1">
<h6></h6>
</div>
<div class = "col-xs-1">
<a href = "javascript:void(0);" class = "this_button_work_for_click_to_add_rooms" title = "Add field">Click & Add Rooms</a>
</div>
</div>
</div>
</div>
<button type = "submit" value = "submit">click to submit</button>
</form>
</body>
</html>Как вы видели, проблема заключается в том, что во второй раз вы пытаетесь отобразить поле выбора, присвоив значение полю выбора «1st room child», поэтому оно не работает.
Чтобы начать исправление вашей проблемы, вы можете использовать правильный метод. Попробуйте вызвать addField() вместо displayingNumberOfChildAge() ;-) aa и эти сгенерированные идентификаторы
—
21.11.2018 16:17
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
341
1
Ответы 1
Ваша проблема в том, что называется «делегированием». Когда вы динамически добавляете в DOM что-то, чего не было при первой загрузке, вам нужно сначала просмотреть уже существующий родительский объект.
Учти это. У вас есть существующий элемент: <div id = "loaded"></div>
Затем вы динамически добавляете что-то в этот div: <button type = "button" id = "someButton">
Чтобы прослушать этот щелчок, вам нужно пройти через родительский div, поскольку он является исходной частью DOM.
$('#loaded').on('click', '#someButton', function () {
//do something
});
Другие вопросы по теме
Php cookie со значением%
Условное отображение значений в массиве PHP
Сопоставление "фигурных" кавычек со стандартными кавычками в запросе БД
Как хешировать все пароли из БД с помощью функции PHP password_hash
PHP CURL не получает прокси (без аутентификации)
Частые записи в базе данных - PHP, MySQLi
Как правильно выполнить задание cron?
Bootstrap, css или отзывчивый не работают как на мобильных устройствах, так и на ПК
Проверка формы Codeigniter для большой формы (28 полей)
Проверка поля данных базы данных перед вставкой данных
Похожие вопросы
Как я могу щелкнуть ссылку, которая открывает изображение, а затем отображать только часть этого изображения
Как ajax умножить файлы JSON с помощью document.ready
VueJS 2: невозможно установить двустороннюю привязку данных для компонентов ввода
Замените строку на 3 шаблона «пробел», «и», «или»
Загрузите внешний файл javascript внутри файла HTML из папки ресурсов Android в WebView
Сторонние зависимости ExtJs не работают по умолчанию при использовании app.json
Можно ли изменить базу для относительных URL-адресов для подмножества дерева DOM через JS без повторения элементов?
Холст - градиентная вспышка и маска
Удалите несколько слоев на чертеже листовки
Преобразовать символы json в html
Одно предложение: будьте осторожны при создании новых элементов и присвоении им атрибута ID. Убедитесь, что это уникальный