Question

我创建了两个下拉列表，其中填充了使用ajax和php函数从mysql数据库中获取的数据，第二个下拉列表依赖于第一个下拉列表并显示相关数据。我将两个下拉列表以表格格式放在彼此相邻的位置。我通过使用javascript动态添加行，下拉元素很好，但我无法获取与其相邻的下拉列表的相关选项。

 <HTML>
  <HEAD>
  <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
  <script src="js/jquery.min.js"></script>
<script src="js/add_table.js"></script>
<script src="js/jquery.autocomplete.js"></script>
<script src="js/jquery.min.js"></script>
  <SCRIPT language="javascript">
  var xmlhttp;
function ajaxFunction(url,myReadyStateFunc)
{
   if (window.XMLHttpRequest)
   {
      // For IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
   }
   else
   {
      // For IE5, IE6
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange= myReadyStateFunc;        // myReadyStateFunc = function
   xmlhttp.open("GET",url,true);
   xmlhttp.send();
}
function getdgl(x)
{
    // in second argument of ajaxFunction we are passing whole function.
   // Goto getCity.php code
   ajaxFunction("getdgl.php?did="+x, function()
   {
       if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
              var d = xmlhttp.responseText;
              d=d.split("|");
              did = d[0].split(",");
              dval = d[1].split(",");
              //rowCount = el.find('#dds').html();

             //dt1 = document.getElementsByName("dgld[]");
             //window.alert(rowCount);
             dt = document.getElementsByClassName('dgld')[0];

             dt.innerHTML=dval.join()
             dt.length=0 
             for(i=0;i<did.length-1;i++)
            {

                   dt[i] = new Option(dval,did[i])
                   //dval = dval[i].join(" ");

            }

        }


    });
}
  function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) {
      var newcell = row.insertCell(i);
      newcell.innerHTML = table.rows[0].cells[i].innerHTML;
      //alert(newcell.childNodes);
      switch(newcell.childNodes[0].type) {
        case "text":
          newcell.childNodes[0].value = "";
          newcell.childNodes[0].id = "input" + rowCount ;
          break;
        case "checkbox":
          newcell.childNodes[0].checked = false;
          newcell.childNodes[0].id = "checkbox" + rowCount ;      
          break;
        case "select-one":
          newcell.childNodes[0].selectedIndex = 0;
          newcell.childNodes[0].I = "select"  ;
          //dt = document.getElementsByClassName('dgld')[i];
          break;
     }
   }
 }

  </SCRIPT>
 </HEAD>
 <BODY>
 <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
 <div id = "dds">
    <TABLE id="dataTable" width="350px" border="1">
    <tr><td><select name="dgl" class="dgl" onchange="getdgl(this.value)">
                <option value="-1">Select Datagroup</option>
                 <?php
                       $link = mysql_connect("localhost","root","AMITYADMIN");
                       $dbSelected = mysql_select_db('cosmic_d');
                       $dgl1 = mysql_query("SELECT * FROM datagrp_l");
                       while($row = mysql_fetch_assoc($dgl1))
                      {
                               echo '<option value="'.$row['dgl'].'">'.$row['Cri'].'</option>';
                       }
                  ?>
               </select>
    </td>
    <td><select name="dgld" class="dgld">
                  <option value="-1">Select dd</option>
                 </select></td>
               </tr>
   </TABLE>
</div>
 </BODY>
</HTML>

Answer 1

我用这个教程来做这件事。干得好！

http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/

无法通过php和ajax从数据库中检索下拉菜单中的详细信息

1 个答案: