时间戳

首页 > 解决方案 > 从下拉列表中触发 Ajax 时，先前的行元素正在更改

javascript - 从下拉列表中触发 Ajax 时，先前的行元素正在更改

问题描述

我正在使用带有 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 填充新值。

阿贾克斯：

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 的解决方案。

标签： javascriptphphtmlajax

解决方案

尝试这个。

请注意对 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>

推荐阅读