从下拉菜单启动Ajax时，前面的行元素会发生更改

Question

我使用的是带有Javascript的PHP和Ajax。我不想在这里使用jQuery。

我有多个动态添加的行，每行有两个下拉菜单。问题是，在第二行或后续行中所做的任何更改都会影响第一行的元素，而不是它们自己的行。

我有两个下拉菜单。

<div class="row">
<div class="col col-sm-2">
<label for="fn">Firm Name</label>
<select class="form-control" name='dealer_firm[]' id="dealer_firm" onchange="get_dealer_name(this.value)" required>
<option value="">Select Firm</option>
<?php 
$sql20=$con->prepare('SELECT DISTINCT firm_name FROM dealers');
$sql20->execute();
$result20=$sql20->get_result();
if($result20->num_rows>0)
{
while($rows20=$result20->fetch_object())
{
echo "<option value='". $rows20->firm_name ."'>".$rows20->firm_name;
}   
}
?>
</select>
</div>
<div class="col col-sm-2">
<label for="dn">Dealer Name</label>
<div id="dn_options">
<select class="form-control"></select>
</div>
</div>

在第一个下拉列表中选择一个值时，第二个下拉列表将使用AJAX填充新值。

AJAX：

function get_dealer_name(frm)
{   
var msgbox=document.getElementById('mymsg');
if(msgbox==null){}
else
msgbox.style.display='none';
if (window.XMLHttpRequest) 
{
xmlhttp=new XMLHttpRequest();
} 
else 
{  
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() 
{
if (this.readyState==4 && this.status==200)
{
document.getElementById("dn_options").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","Dealer_Name.php?q1="+frm,true);
xmlhttp.send();
}

Dealer_Name.php的代码

if(isset($_GET['q1']))
{
$f=$_GET['q1'];
$sql20=$con->prepare('SELECT sno,dealer_name FROM dealers WHERE firm_name=?');
$sql20->bind_param('s', $f);
$sql20->execute();
$result20=$sql20->get_result();
if($result20->num_rows>0)
{
echo '<select class="form-control" name="dealer_name[]" id="dealer_name" required>';
echo "<option value='selectdealer'>Select Dealers</option>";
while($rows20=$result20->fetch_object())
{
echo "<option value='". $rows20->sno ."'>".$rows20->dealer_name;
}
echo '</select>';
}
}

这么多效果不错。

现在，我有一个"添加更多行"按钮，它将为下一个选择添加具有相同下拉列表的更多行。

function add_newrow()
{
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (this.readyState==4 && this.status==200)
{
var list = document.querySelectorAll(".newretrow");
var last = list[list.length - 1];
last.innerHTML=this.responseText;
var list = document.querySelectorAll(".newretrow");
var last = list[list.length - 1];
var newDiv = document.createElement('div');
newDiv.setAttribute("class", "row newretrow");
newDiv.setAttribute("id", "newretrow");
newDiv.innerHTML = "";
last.insertAdjacentElement("afterend", newDiv);
}
}
xmlhttp.open("GET","Add_New_Row.php",true);
xmlhttp.send();
}

Add_New_Row.php

<div class="col col-sm-2">
<label for="fn">Firm Name</label>
<select class="form-control" name='dealer_firm[]' id="dealer_firm" onchange="get_dealer_name(this.value)" required>
<option value="">Select Firm</option>
<?php 
$sql20=$con->prepare('SELECT DISTINCT firm_name FROM dealers');
$sql20->execute();
$result20=$sql20->get_result();
if($result20->num_rows>0)
{
while($rows20=$result20->fetch_object())
{
echo "<option value='". $rows20->firm_name ."'>".$rows20->firm_name;
}   
}
?>
</select>
</div>
<div class="col col-sm-2">
<label for="dn">Dealer Name</label>
<div id="dn_options">
<select class="form-control"></select>
</div>
</div>

问题说明：

在新添加的行中，当我从第一个下拉列表中选择某个内容时，它应该更改第二行的第二个下拉列表的值，但它会更改第一行而不是第二行的第二个下降列表的值。同一行的元素应该受到影响。

请建议使用Javascript而不是Jquery的一些解决方案。

Answer 1

试试这个。

注意HTML ID的更改也是

var currentRow, 
xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
function get_dealer_name(sel) {
currentRow = sel.closest(".row"); // needs a polyfill for IE but works in Chrome, Edge, FX
var msgbox = document.getElementById('mymsg');
if (msgbox) msgbox.style.display = 'none';
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
currentRow.querySelector(".dn_options").innerHTML = this.responseText;
}
}
xmlhttp.open("GET", "Dealer_Name.php?q1=" + sel.value, true);
xmlhttp.send();
}

<div class="row">
<div class="col col-sm-2">
<label>Firm Name</label>
<select class="form-control" name='dealer_firm[]' onchange="get_dealer_name(this)" required>
<option value="">Select Firm</option>
</select>
</div>
<div class="col col-sm-2">
<label>Dealer Name</label>
<div class="dn_options">
<select class="form-control"></select>
</div>
</div>
</div>