В веб-приложении, используемом для регистрации комнат и используемых продуктов, я генерирую список строк с несколькими полями ввода (см. Код # 1). Код просто добавляет строку с некоторыми полями ввода. Также в коде отображается динамический выпадающий список c, созданный с помощью PHP (см. Также код # 1).
Строки сгенерированы правильно, а выпадающий список работает нормально. Однако код используется для добавления товаров в заказ. Эти продукты имеют цену по умолчанию в базе данных (которую можно редактировать на другой странице ...).
Каждая сгенерированная строка выглядит как код # 2, однако с поправкой на удобочитаемость. Когда я выбираю продукт из списка, в двух других полях должна быть указана цена. Поле ввода для изменения цены только для этого заказа и текстовая часть только для справки.
Код # 3 показывает часть кода, которая создала вызов, и возвращает значение в требуемых местах.
Этот код отлично работает в первой строке, но когда я изменяю 2-ю из любых Другой из выпадающего списка ничего не меняет.
Мой вопрос: как мне заставить это работать, чтобы, когда я выбираю любой продукт в любом выпадающем списке, сгенерированном для отображения цены в соответствующих полях ввода / div?
У меня нет ни одного ключ к решению этой проблемы. Пожалуйста, помогите.
Изменить 1 : коды № 2 и № 3 изменены, чтобы использовать «класс» вместо «id». Я, как плохой человек, использовал идентификаторы, а не классы, имея одни и те же поля несколько раз ... Пожалуйста, прости мою глупую ошибку. Но это не решает проблему, связанную с изменением только первой строки, даже если я добавляю строку несколько раз.
Возможно, задание моего вопроса в другом вате упрощает понимание моей проблемы, в то время как код остается неизменным. одни и те же.
У меня есть несколько строк с сгенерированным PHP полем выбора, пустым номером типа поля ввода и пустым div для справки только в дальнейшем.
Пример в фиктивном режиме:
<select class product></select><input type="number" name="price[]" class="price"><div class="ajaxprice">
<select class product></select><input type="number" name="price[]" class="price"><div class="ajaxprice">
<select class product></select><input type="number" name="price[]" class="price"><div class="ajaxprice">
<select class product></select><input type="number" name="price[]" class="price"><div class="ajaxprice">
Эти строки добавляются с кодом # 1, в то время как первая уже находится на странице с кнопкой «добавить», а не кнопкой «удалить». Когда я изменяю select в первой строке, и вход, и div хорошо заполняются скриптом в коде № 3. Если один из других рядов изменяется, ничто не изменяется вообще. Ни предупреждение, которое я вставил в целях тестирования. Итак, как мне ввести необходимую информацию в div и ввести при изменении n-го поля выбора?
код # 1: Вставка и удаление строк с полями ввода
var max_rows = 10; // maximum input fields
var wrapper = $("#wrapper_rows");
var counter = 1;
$(".rowBtn").click(function (e) {
e.preventDefault();
if (counter < max_rows) {
counter++;
var row = 'some lay out';
row = row + '<?php echo get_products_add($con, $com); ?>';
row = row + 'some futher layout / closing tags';
$(wrapper).append(row );
}
})
$(wrapper).on("click",".rowminBtn", function(e){
e.preventDefault();
$(this).parent('div').parent('div').remove(); counter--;
})
код # 2
<select class="product" name="product[]" >// LOADS OF OPTIONS</select>
<input type="number" class="price" name="price[]">
<div class="ajaxprice"></div>
код # 3
$(".product").change(function () {
var productid = $('.product').val();
if (productid != '') {
$.ajax({
url:"get_price.php",
method:"POST",
data: { id:productid },
dataType:"json",
success:function(result){
$(".ajaxprice").html("(Original price: " + result + ")");
$(".price").val(result);
}
})
}
else {
$(".ajaxprice").html('');
$(".price").val("");
}
})