У меня есть интерфейс для моих администраторов, где они могут добавлять поля в базу данных. Если они хотят добавить несколько полей, они могут легко добавить новую строку. Это делается путем клонирования через JavaScript. Теперь есть одно раскрывающееся меню, и на основе выбора из раскрывающегося списка я хочу записать значения по умолчанию в поля ввода текста для min[] и max[].
Это отлично работает, если у меня есть только одна строка. Но если я клонирую его несколько раз и делаю выбор (например, я выбираю опцию «relative_number») только в одной строке (например), поля min и max обновляются в каждой строке. Что я могу сделать, чтобы при выборе раскрывающегося списка в определенной строке обновлялись только минимальные и максимальные значения в одной строке?
<div class = "wrapper">
<div class = "entities_wrap">
<div class = "row">
<div class = "col-md-3">
<label>Name</label>
<input type = "text" name = "entity_name[]" value = "" style = "width: 275px;" class = "form-control" id = "entity_name[]" />
</div>
<div class = "col-md-3">
<label>Field Name</label>
<input type = "text" name = "entity_field_name[]" value = "" style = "width: 275px;" class = "form-control" id = "entity_field_name[]" />
</div>
<div class = "col-md-2">
<label>Category</label>
<select id = "entity_field_type[]" name = "entity_field_type[]" class = "form-select"> <option value = ""></option> <option value = "absolute_number">absolute_number</option> <option value = "relative_number">relative_number</option> <option value = "likert_5">likert_5</option> <option value = "likert_7">likert_7</option> <option value = "string">string</option> </select>
</div>
<div class = "col-md-1 minValue">
<label>Min</label>
<input type = "text" class = "form-control min" id = "min[]" name = "min[]" value = ""/>
</div>
<div class = "col-md-1">
<label>Max</label>
<input type = "text" class = "form-control max" id = "max[]" name = "max[]" value = ""/>
</div>
<div class = "col-md-1" style = "vertical-align: middle;">
<label> </label>
<div style = "margin: 0px 10px;">
<i class = "fas fa-trash remove-item"></i></span>
</div>
</div>
<div class = "col-md-1" style = "vertical-align: middle;">
<label> </label>
<div style = "margin: 0px 10px;">
<i class = "fas fa-plus add-plus"></i> <span class = "plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>
<script>
$(document).ready(function () {
$(".add-plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function () {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^ = "entity_field_type"]').on('change', function()
{
var sel_cat = this.value;
if (sel_cat == 'relative_number')
{
$('input[id^ = "min"]').val("0");
$('input[id^ = "max"]').val("100");
}
if (sel_cat == 'absolute_number')
{
$('input[id^ = "min"]').val("0");
$('input[id^ = "max"]').val("infinite");
}
// For the other options the code should work alike
});
</script>
Уже пробовал разные способы решить эту проблему через DOM, идентифицируя родительские узлы, братья и сестры и т. д., но у меня это не работает.
Заранее большое спасибо за вашу помощь!
Хотя вам определенно следует рассмотреть динамическое изменение имен и идентификаторов ваших клонированных входов, проблема, с которой вы столкнулись, связана с вашими селекторами для min
и max
В случае вашего javascript
$('input[id^ = "min"]').val("0");
$('input[id^ = "max"]').val("100");
Вы выбираете все min
и max
на странице.
Вы необходимость, чтобы найти Связанныйmin
и max
, что означает найти шкаф .row
в поле выбора, а затем найти дочерний min/max
var $row = $(this).closest("div.row");
$row.find('input[id^ = "min"]').val("0");
$row.find('input[id^ = "max"]').val("100");
Вот пример функционирующего фрагмента.
$(document).ready(function() {
$(".add-plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function() {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^ = "entity_field_type"]').on('change', function() {
var sel_cat = this.value;
var $row = $(this).closest("div.row"); //find the parent row we are in.
if (sel_cat == 'relative_number') {
$row.find('input[id^ = "min"]').val("0"); //use that row to find the related min
$row.find('input[id^ = "max"]').val("100"); //use that row to find the related max
}
if (sel_cat == 'absolute_number') {
$row.find('input[id^ = "min"]').val("0");
$row.find('input[id^ = "max"]').val("infinite");
}
// For the other options the code should work alike
});
<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel = "stylesheet" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "wrapper">
<div class = "entities_wrap">
<div class = "row">
<div class = "col-md-3">
<label>Name</label>
<input type = "text" name = "entity_name[]" value = "" style = "width: 275px;" class = "form-control" id = "entity_name[]" />
</div>
<div class = "col-md-3">
<label>Field Name</label>
<input type = "text" name = "entity_field_name[]" value = "" style = "width: 275px;" class = "form-control" id = "entity_field_name[]" />
</div>
<div class = "col-md-2">
<label>Category</label>
<select id = "entity_field_type[]" name = "entity_field_type[]" class = "form-select">
<option value = ""></option>
<option value = "absolute_number">absolute_number</option>
<option value = "relative_number">relative_number</option>
<option value = "likert_5">likert_5</option>
<option value = "likert_7">likert_7</option>
<option value = "string">string</option>
</select>
</div>
<div class = "col-md-1 minValue">
<label>Min</label>
<input type = "text" class = "form-control min" id = "min[]" name = "min[]" value = "" />
</div>
<div class = "col-md-1">
<label>Max</label>
<input type = "text" class = "form-control max" id = "max[]" name = "max[]" value = "" />
</div>
<div class = "col-md-1" style = "vertical-align: middle;">
<label> </label>
<div style = "margin: 0px 10px;">
<i class = "fas fa-trash remove-item"></i></span>
</div>
</div>
<div class = "col-md-1" style = "vertical-align: middle;">
<label> </label>
<div style = "margin: 0px 10px;">
<i class = "fas fa-plus add-plus"></i> <span class = "plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>
Большое спасибо и низкий поклон Steve0! Простое решение, и оно отлично работает!
Ну,
id
должен быть уникальным. Если вы клонируете элементы, увеличивайте идентификатор, чтобы они были уникальными, тогда легко присвоить значение конкретным селекторам идентификаторов#min1
#max1
. Другой «трюк» может состоять в том, чтобы назначить класс вновь клонированным элементам, после чего его будет легко найти и обновить; наконец, удалите класс после того, как вы назначили значения.