具有动态字段的动态组合框

Question

我的combobox和动态字段有问题。所以基本上，我将数据输入到一个mysql tablefor witch 有动态行。每行有 2 个组合框，第二个取决于第一个。在第一行上一切正常，但是当我添加更多行时，第二个组合框无法显示记录。

这是我的代码：

<table class="table table-bordered" id="dynamic_field">
<tr>
<td>
<div>ID</div>
</td>
<td>
<div>Klienti</div>
</td>
<td>
<div>Produkti</div>
</td>
<td>
<div>Njesia</div>
</td>
<td>
<div>MAC</div>
</td>
<td>
<div>Sasisa</div>
</td>
<td>
<div></div>
</td>
</tr>
<tr>
<td><input size="1" type="text" name="id[]" value="<?php echo "$modulid";?>" class="form-control name_list" readonly /></td>
<td><input size="1" type="text" name="klienti[]" value="<?php echo "$emriklientit";?>" class="form-control name_list" readonly /></td>
<td>
<div>
<div>
</div>
<div class="col-75">
<select id="name" name="name[]" class="form-control name_list" required >
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>    
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
</div>
</td>
<td>
<div>
<div>
</div>
<div class="col-75">
<select id="njesia" name="njesia[]" class="form-control name_list" required >     
</select>
</div>
</div>
</td>
<td><input  type="text" name="mac[]" placeholder="00:11:22:33:44:55" class="form-control name_list" /></td>
<td><input size="2" type="text" name="sasia[]" placeholder="Sasia" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Shto</button></td>
</tr>
</table>
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
</body>
</html>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="id[]" size="1" value="<?php echo "$modulid";?>" class="form-control name_list" readonly /></td><td><input size="1" type="text" name="klienti[]" value="<?php echo "$emriklientit";?>" class="form-control name_list" readonly /></td><td><div><div></div><div class="col-75"><select id="name" name="name[]" class="form-control name_list" required ><option value=""></option><option value="A">A</option><option value="B">B</option> <option value="C">C</option><option value="D">D</option></select></div></div></td><td><div><div></div><div class="col-75"><select id="njesia" name="njesia[]" class="form-control name_list" required ></select></div></div></td><td><input  type="text" name="mac[]" placeholder="00:11:22:33:44:55" class="form-control name_list" /></td><td><input type="text" size="2" name="sasia[]" placeholder="Sasia" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id"); 
$('#row'+button_id+'').remove();
}); 
});
$("#name").change(function () {
var val = $(this).val();
if (val == "A") {
$("#njesia").html("<option value=''></option><option value='A1'>A1</option><option value='B1'>B1</option>");
} else if (val == "B") {
$("#njesia").html("<option value=''></option><option value='A2'>A2</option><option value='B2'>B2</option>");
}else if (val == "C") {
$("#njesia").html("<option value=''></option><option value='A3'>A3</option><option value='B3'>B3</option>");
}
});

Answer 1

首先让我说我不使用jQuery所以接下来是香草 js 和 jQuery 的糟糕混合~毫无疑问，它只能用 jQuery 来实现！

在原始 HTML 表中，修改此内容以删除 ID 并将内联(是的，我知道(事件处理程序添加到初始select菜单中。

<td>
<div>
<div>
</div>
<div class="col-75">
<select name="name[]" class="form-control name_list" required onchange="setoptions(event)">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
</div>
</td>
<td>
<div>
<div>
</div>
<div class="col-75">
<select name="njesia[]" class="form-control name_list" required>
</select>
</div>
</div>
</td>

在javascript函数中插入的HTML字符串中，也这样做并删除ID并添加内联事件处理程序(是的，我知道(

<select name="name[]" class="form-control name_list" required onchange="setoptions(event)">

还有

<select name="njesia[]" class="form-control name_list" required>

如果您定义findparent并像这样setoptions函数：

function findparent(n){
while( n.tagName!='TD' ){
n=n.parentNode;
}
return n
}
function setoptions(event){
var oCell=findparent( event.target );
var oSelect=oCell.parentNode.querySelector('select[name="njesia[]"]');
var html;
switch( event.target.value ){
case 'A':html="<option value=''></option><option value='A1'>A1</option><option value='B1'>B1</option>";break;
case 'B':html="<option value=''></option><option value='A2'>A2</option><option value='B2'>B2</option>";break;
case 'C':html="<option value=''></option><option value='A3'>A3</option><option value='B3'>B3</option>";break;
case 'D':html="<option value=''></option><option value='A4'>A4</option><option value='B4'>B4</option>";break;
}
oSelect.innerHTML='';
oSelect.insertAdjacentHTML('afterbegin',html)
}

然后您应该发现chained下拉菜单被正确定位，因为父/同级选择器

function findparent(n){
while( n.tagName!='TD' ){
n=n.parentNode;
}
return n
}
function setoptions(event){
var oCell=findparent( event.target );
var oSelect=oCell.parentNode.querySelector('select[name="njesia[]"]');
var html;
switch( event.target.value ){
case 'A':html="<option value=''></option><option value='A1'>A1</option><option value='B1'>B1</option>";break;
case 'B':html="<option value=''></option><option value='A2'>A2</option><option value='B2'>B2</option>";break;
case 'C':html="<option value=''></option><option value='A3'>A3</option><option value='B3'>B3</option>";break;
case 'D':html="<option value=''></option><option value='A4'>A4</option><option value='B4'>B4</option>";break;
}
oSelect.innerHTML='';
oSelect.insertAdjacentHTML('afterbegin',html)
}
		
$( document ).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr><td><input type="text" name="id[]" size="1" value="" class="form-control name_list" readonly /></td><td><input size="1" type="text" name="klienti[]" value="" class="form-control name_list" readonly /></td><td><div><div></div><div class="col-75"><select name="name[]" class="form-control name_list" required onchange="setoptions(event)"><option value=""></option><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option></select></div></div></td><td><div><div></div><div class="col-75"><select name="njesia[]" class="form-control name_list" required></select></div></div></td><td><input  type="text" name="mac[]" placeholder="00:11:22:33:44:55" class="form-control name_list" /></td><td><input type="text" size="2" name="sasia[]" placeholder="Sasia" class="form-control name_list" /></td><td><button type="button" name="remove" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$( document ).on('click', '.btn_remove', function(e){
var n=e.target;
while( n.tagName!='TR' )n=n.parentNode;
n.parentNode.removeChild( n );
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table class="table table-bordered" id="dynamic_field">
<tr>
<td>
<div>ID</div>
</td>
<td>
<div>Klienti</div>
</td>
<td>
<div>Produkti</div>
</td>
<td>
<div>Njesia</div>
</td>
<td>
<div>MAC</div>
</td>
<td>
<div>Sasisa</div>
</td>
<td>
<div></div>
</td>
</tr>
<tr>
<td>
<input size="1" type="text" name="id[]" value="<?php echo " $modulid ";?>" class="form-control name_list" readonly />
</td>
<td>
<input size="1" type="text" name="klienti[]" value="<?php echo " $emriklientit ";?>" class="form-control name_list" readonly />
</td>
<td>
<div>
<div>
</div>
<div class="col-75">
<select name="name[]" class="form-control name_list" required onchange="setoptions(event)">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
</div>
</td>
<td>
<div>
<div>
</div>
<div class="col-75">
<select name="njesia[]" class="form-control name_list" required></select>
</div>
</div>
</td>
<td>
<input type="text" name="mac[]" placeholder="00:11:22:33:44:55" class="form-control name_list" />
</td>
<td>
<input size="2" type="text" name="sasia[]" placeholder="Sasia" class="form-control name_list" />
</td>
<td>
<button type="button" name="add" id="add" class="btn btn-success">Shto</button>
</td>
</tr>
</table>
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>