Question

我正在将PHP和Ajax与Javascript一起使用。我不想在这里使用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>

问题陈述：

在新添加的行中，当我从第一下拉菜单中选择某项时，它应该更改第二行的第二下拉菜单的值，但它会更改第二行中 second下拉菜单的值第一行而不是第二行。同一行的元素应受到影响。

请提出一些使用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>

从下拉菜单中触发Ajax时，上一行元素已更改

1 个答案: