В моем коде div
, который мне нужно продублировать, когда пользователь нажимает кнопку Add
. В div есть 2 выпадающих списка, один из которых динамически заполняется из базы данных, а другой динамически заполняется на основе первого выпадающего списка.
Я достиг дублирования div
с использованием клона jQuery ( ) . Но динамически заполняющая функция не работает для первого выпадающего элемента div, а также для второго. Кроме того, иногда, когда я выбираю опцию в родительском div, это также показывает странные выборы.
var count = 1;
$('#add-new').click(function() {
//clone
var row = $('#scope-brand-div').clone(true);
row.appendTo('#clone-parent');
//add new ids
var scopeselect = $('select.scope-select');
var brandselect = $('select.brand-select');
$(row).find(scopeselect).attr('id', 'project-scope' + count);
$(row).find(brandselect).attr('id', 'brands_used' + count);
count++;
});
<form action="add_project" method="POST">
<h4>Project Scope <button class="clone" name="addnew" id="add-new">Add</button></h4>
<div class="row">
<div class="col-md-6">
<div class="row" id="clone-parent">
<div id="scope-brand-div">
<div class="col-md-6">
<div class="form-group">
<label for="scope"><?php echo $this->lang->line('xin_project_scope');?></label>
<select name="scope" class="form-control select-border-color border-warning scope-select" data-plugin="select_hrm" data-placeholder="<?php echo $this->lang->line('xin_project_scope');?>" id="project-scope">
<option value=""></option>
<?php foreach($all_project_scope as $scope) { ?>
<option value="<?php echo $scope->scope_id; ?>">
<?php echo $scope->scope_name; ?>
</option>
<?php } ?>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group" id="brands-ajax">
<label for="brands_used"><?php echo $this->lang->line('xin_brands_used');?></label>
<select name="brands_used" id="brands_used" class="form-control select-border-color border-warning brand-select" data-plugin="select_hrm" data-placeholder="<?php echo $this->lang->line('xin_brands_used');?>">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<input type="submit name=" submit " id="submit-form " value="Submit ">
</form>