#javascript #html #forms #javascript-objects
Вопрос:
В целом блок кода работает, просто добавленная строка неправильно обращается к объекту данных. Примеры для отдельных компонентов можно найти, но комбинация не может быть найдена.
желаемое поведение: При нажатии кнопки добавить строку следующий каскад работает так же, как и оригинал.
Текущая ошибка: После нажатия кнопки добавить строку второй каскад заблокирован для выбора первого каскада и не является динамическим.
lt;!DOCTYPE htmlgt; lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"gt;lt;/scriptgt; lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /gt; lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"gt;lt;/scriptgt; lt;htmlgt; lt;headgt; lt;meta name="viewport" content="width=device-width, initial-scale=1"gt; lt;scriptgt; var subjectObject = { "Front-end": { "HTML": ["Links", "Images", "Tables", "Lists"], "CSS": ["Borders", "Margins", "Backgrounds", "Float"], "JavaScript": ["Variables", "Operators", "Functions", "Conditions"] }, "Back-end": { "PHP": ["Variables", "Strings", "Arrays"], "SQL": ["SELECT", "UPDATE", "DELETE"] } } window.onload = function() { var subjectSel = document.getElementById("subject"); var topicSel = document.getElementById("topic"); var chapterSel = document.getElementById("chapter"); for (var x in subjectObject) { subjectSel.options[subjectSel.options.length] = new Option(x, x); } subjectSel.onchange = function() { //empty Chapters- and Topics- dropdowns chapterSel.length = 1; topicSel.length = 1; //display correct values for (var y in subjectObject[this.value]) { topicSel.options[topicSel.options.length] = new Option(y, y); } } topicSel.onchange = function() { //empty Chapters dropdown chapterSel.length = 1; //display correct values var z = subjectObject[subjectSel.value][this.value]; for (var i = 0; i lt; z.length; i ) { chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]); } } } lt;/scriptgt; lt;/headgt; lt;bodygt; lt;h1gt;Cascading Dropdown Examplelt;/h1gt; lt;div class="container" gt; lt;div class="row"gt; lt;div class="col-md-12"gt; lt;div data-role="dynamic-fields"gt; lt;div class="form-inline"gt; lt;div class="form-group"gt; lt;form name="form1" id="form1" action="/action_page.php"gt; Subjects: lt;select name="subject" id="subject"gt; lt;option value="" selected="selected"gt;Select subjectlt;/optiongt; lt;/selectgt; lt;brgt;lt;brgt; Topics: lt;select name="topic" id="topic"gt; lt;option value="" selected="selected"gt;Please select subject firstlt;/optiongt; lt;/selectgt; lt;brgt;lt;brgt; Chapters: lt;select name="chapter" id="chapter"gt; lt;option value="" selected="selected"gt;Please select topic firstlt;/optiongt; lt;/selectgt; lt;/divgt; lt;button class="btn btn-danger" data-role="remove"gt; lt;span class="glyphicon glyphicon-remove"gt;lt;/spangt; lt;/buttongt; lt;button class="btn btn-primary" data-role="add"gt; lt;span class="glyphicon glyphicon-plus"gt;lt;/spangt; lt;/buttongt; lt;brgt;lt;brgt; lt;divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; lt;stylegt; html, body { padding-top: 20px; } [data-role="dynamic-fields"] gt; .form-inline .form-inline { margin-top: 0.5em; } [data-role="dynamic-fields"] gt; .form-inline [data-role="add"] { display: none; } [data-role="dynamic-fields"] gt; .form-inline:last-child [data-role="add"] { display: inline-block; } [data-role="dynamic-fields"] gt; .form-inline:last-child [data-role="remove"] { display: none; } lt;/stylegt; lt;scriptgt; $(function() { // Remove button click $(document).on( 'click', '[data-role="dynamic-fields"] gt; .form-inline [data-role="remove"]', function(e) { e.preventDefault(); $(this).closest('.form-inline').remove(); } ); // Add button click $(document).on( 'click', '[data-role="dynamic-fields"] gt; .form-inline [data-role="add"]', function(e) { e.preventDefault(); var container = $(this).closest('[data-role="dynamic-fields"]'); new_field_group = container.children().filter('.form-inline:first-child').clone(); new_field_group.find('input').each(function(){ $(this).val(''); }); container.append(new_field_group); } ); }); lt;/scriptgt;