Позвольте мне в предисловии сказать, что я не программист.Так что терпите меня ... мои запросы могут показаться немного "духовными" для мастеров программирования там.Во всяком случае, я пытаюсь объединить функциональность двух сценариев JQuery вместе.Один скрипт скрывает части формы (в div), пока пользователь не выберет из выпадающего списка нужную ему категорию.Когда пользователь выбирает что-то, div, связанный с выбором, показывает себя.Другой сценарий позволяет пользователю снова добавить / удалить (или, другими словами, клонировать) тот же фрагмент формы.Между тем, я хотел бы, чтобы начальный выпадающий список тоже был клонирован, позволяя пользователю снова выбрать другую или ту же категорию и добавить / удалить фрагмент формы, связанный с выбранной категорией.
Это похоже намагазин с 3 товарными категориями.Приходит клиент и хочет получить расценки на широкий ассортимент товаров из одной или всех трех категорий товаров в одном запросе.
Так, например, пользователь выбирает из начального выпадающего списка «категория_1».Отобразится фрагмент формы, связанный с категорией 1, и пользователь заполняет его. Пользователь «добавляет» другой продукт, клонируя тот же фрагмент формы, который снова заполняется.Ниже всего этого также клонируется начальный выпадающий список, и они могут выбирать, скажем, "category_2".Отобразится фрагмент формы, связанный с категорией 2, и пользователь может заполнить его и «добавить» еще один фрагмент формы продукта категории 2, как они это сделали с категорией 1.
Надеюсь, это имело смысл.Во всяком случае, сценарии работают нормально сами по себе.Когда я использую их вместе, у меня возникают проблемы.
Вот первый скрипт, который я использую.
<script type="text/javascript">
$(document).ready(function(){
$('#category_1').hide();
$('#category_2').hide();
$('#category_3').hide();
$("#thechoices").change(function(){
if(this.value == 'all')
{$("#boxes").children().show();}
else
{$("#" + this.value).show().siblings().hide();}
});
$("#thechoices").change();
});
</script>
Вот второй скрипт.Я получил это отсюда: http://vipullimbachiya.com/?p=209. Он использует отдельный файл .js.Сценарий ниже активирует его.
<script type="text/javascript">
$(document).ready(function () {
$(".clone_another").EnableMultiField({
linkText: "Add Item +",
removeLinkText: "Remove Item -",
confirmOnRemove: false,
});
});
</script>
Это моя основная разметка.
<form>
<div class="clone_another">
<select id="thechoices">
<option value="category_1">Category 1</option>
<option value="category_2">Category 2</option>
<option value="category_3">Category 3</option>
</select>
<div id="boxes">
<div id="category_1">
<p>Box 1 stuff...</p>
</div>
<div id="category_2">
<p>Box 2 stuff...</p>
</div>
<div id="category_3">
<p>Box 3 stuff...</p>
</div>
</div>
</div>
</form>
Проблема в том, что первый скрипт работает.Он скрывает и отображает фрагменты формы в соответствии с тем, что выбрано в исходном раскрывающемся списке.Что не работает, так это возможность клонировать фрагмент формы и начальный раскрывающийся список, чтобы пользователь мог сделать еще один запрос для другого продукта.Я знаю, что мне здесь не хватает чего-то большого, но я недостаточно осведомлен, чтобы знать, где искать или как решить эту проблему.Я очень признателен за любую информацию, которая может быть мне дана по этой проблеме.