У меня есть этот скрипт для создания трех выпадающих списков и одного поля ввода текста для моей веб-формы, которые я должен отправить в базу данных с помощью PHP. Эта форма является HTML, но только эта часть является javascript для заполнения полей. Я использую этот javascript для создания примерно 15 наборов этих выпадающих списков и полей ввода текста. (1 набор = 3 выпадающих меню и 1 текстовое поле ввода).
Мой вопрос: если пользователь выбирает параметр из первого раскрывающегося списка, тогда параметры в двух остальных раскрывающихся списках должны измениться в соответствии с выбранным параметром в первом обратном направлении.
Я хотел бы, чтобы после генерации желаемого количества наборов, выбирая номер из выпадающего списка в этой скрипке, он будет генерировать наборы od 3 dropdowns и 1 поле ввода динамически.
Поэтому, если кто-то выбирает вариант один из первого раскрывающегося списка, он должен также изменить параметры в других выпадающих меню.
JSFIDDLE
СЦЕНАРИЙ:
<script> $(function() { $("input[type=button][value=Add]").click(function(e) { for (i = 0; i < document.getElementById('sel').value; i++) { e.preventDefault(); var j = 1; var newDiv = $("<div>").appendTo("#dropbox"); $("<select>").attr("name", "input1_"+j).appendTo(newDiv).append( $("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2")); $("<select>").attr("name", "input2_"+j).appendTo(newDiv).append( $("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2")); $("<select>").attr("name", "input3_"+j).appendTo(newDiv).append( $("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2")); $("<input>").attr("name", "input4_"+j).appendTo(newDiv); $("<button>").text("Remove").appendTo(newDiv).click(function(e) { e.preventDefault(); $(this).parent().remove(); }) j++; } }) }) </script> HTML:
<form> <select id="sel"> <option value="" selected="selected"></option> <option value="01" >01</option> <option value="02" >02</option> <option value="03" >03</option> <option value="04" >04</option> <option value="05" >05</option> <option value="06" >06</option> <option value="07" >07</option> <option value="08" >08</option> <option value="09" >09</option> <option value="10" >10</option> <option value="11" >11</option> <option value="12" >12</option> <option value="13" >13</option> <option value="14" >14</option> <option value="15" >15</option> </select> <input type="button" value="Add" /> <div id="dropbox"></div> </form>
Поскольку вы используете jQuery, я предлагаю добавить событие изменения в раскрывающееся меню. (Связанная страница документов jQuery содержит полный пример).
Что касается заполнения остальных 2 раскрывающихся списков, у вас есть несколько вариантов, например:
Статический: ваш PHP-код, который создает страницу, заполняет массив javascript со всеми возможными параметрами, необходимыми в соответствии с выбором пользователя в первом раскрывающемся списке. Тогда ваш код javascript может использовать этот массив всякий раз, когда запускается событие изменения.
Динамический: если подвыбор не может быть предсказан или загружен при загрузке страницы, используйте запрос jQuery ajax для запроса сервера для параметров, соответствующих выбору пользователя. Вы также можете прочитать о формате данных JSon (поддерживаемом PHP с помощью json_encode )
DEMO
Я дал sel и кнопку ID и изменил доступ к dom для jQuery
Я также использую «i» и «j» сейчас
Предполагая, что вы хотите синхронизировать 3 выбора, код может выглядеть так:
$(function() { $("input[type=button][value=Add]").click(function(e) { e.preventDefault(); for (var i=0,n=$('#sel').val();i<n; i++) { var newDiv = $("<div>").appendTo("#dropbox"); for (var j=0;j<3;j++) { var id = "input"+i+"_"+j; $("<select>") .attr("id",id) .attr("name",id) .on("change",function() { // set all other select's value to this value $(this).siblings("select").val(this.value); }) .append( $("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2")) .appendTo(newDiv); } // j $("<input>") .attr("name", "input"+i+"_"+j) .appendTo(newDiv); $("<button>").text("Remove").appendTo(newDiv).click(function(e) { e.preventDefault(); $(this).parent().remove(); }) } // i }) })