【问题标题】:Populating dropdown - PHP Ajax MySQL填充下拉列表 - PHP Ajax MySQL
【发布时间】:2011-07-17 00:31:43
【问题描述】:

我的 HTML 页面上有 2 个下拉列表:第一个下拉列表包含数据库列名称,第二个下拉列表将根据这些名称填充

我有一个包含字段的表:<Student Name, Degree, City>,以下是条目;

1. "A", "BS", "New York"
2. "B", "BS", "Chicago"
3. "C", "MS", "Boston"
4. "D", "MS", "New York"

所以我的第一个下拉列表将包含列名,即“Degree”和“City”。

如果我选择“Degree”,第二个下拉菜单应该填充“BS”和“MS”,如果我选择“City”,第二个下拉菜单应该选择“New York”、“Boston”和“Chicago”。

我该如何进行实施?

[添加我的代码]:

changeSecond(first) 方法与您建议的完全相同

<body>
   <form method="POST" action="" name="mainForm">
      <table>
         <tr>
            <td> Filter by: </td>
            <td>
            <div id="first">
               <select onChange="changeSecond(this.value)">
                  <option value="1">All</option>
                  <option value="2">Degree</option>
                  <option value="3">City</option>
               </select>
            </td>
         </tr>
         <tr>
            <td>&nbsp</td>
            <td>
               <div id="second">
                  <select name="val">
                     <option value=""></option>
                  </select>
               </div>
            </td>
         </tr>
      </table>
   </form>
</body>

这是你建议的 second_script.php:

<?
   $link = mysql_connect("localhost", "root", "");

   if (!$link)
   {
      die('Could not connect: ' . mysql_error());
   }
   if (mysql_select_db("myDatabase", $link))
   {
      $first=mysql_real_escape_string($_REQUEST["first"]);
      $query="SELECT ".$first." FROM myTable GROUP BY ".$first;
      $data=mysql_query($query);

      echo "<select id=\"second\">";
      while($row=mysql_fetch_row($data))
      {
         echo "<option value=\"".$row[0]."\">".$row[0]."</option>";
      }
      echo "</select>";
   }
   echo mysql_error();
?>

【问题讨论】:

  • 呃,对不起。尝试使用替代变量名而不是“新”...(在 changeSecond 函数中)
  • 另外,您需要调整脚本以适应您的“全部”案例
  • @Robot:还是不行。从第一个下拉列表中选择一个值会在浏览器 "; while($row=mysql_fetch_row($data)) { echo ""; } echo ""; } ?&gt; 上显示以下内容。我无法理解这里的问题。数据库查询会不会有问题?
  • 看来 php 提前关闭了……有流氓吗?在
  • 从头开始 ^...您的脚本仍然与上面显示的完全一样吗?看起来某处缺少引号,因此它正在回显不应该回显的所有内容,并隐藏了应回显的内容。也许额外的 \ 给第二个\">\";

标签: php mysql ajax


【解决方案1】:

您要根据其他下拉菜单填充的主文件的代码 在下面的示例中,我在父下拉列表中选择的那个城市的子下拉列表中显示位置

    <script type="text/javascript">
    function city_locality(val)
    {
    // alert (val);
    url="<?php echo $this->baseurl ?>/components/com_ezportal/includes/query.php";
    data="stid="+val;
$.post(url,data,function(data){
$("#locid").html(data);
});     
    }
    </script>
    <select name="filter_1state" id="filter_1state" onChange="city_locality(this.value)">
      <option value="0">-- Select City --</option>
      <option value="1">Lahore</option>
      <option value="2">Karachi</option>
      <option value="3">Islamabad</option>
      <option value="4">Quetta</option>
      <option value="5">Multan</option>
    </select>

文件 query.php 的代码

    <?php 
    $link = mysql_connect('localhost', 'root', '');
    mysql_select_db('mydatabase');
    if (isset($_POST['stid']))
    {
        $stid = $_POST['stid'];
        $query= mysql_query("SELECT id,ezcity FROM tbl_locality WHERE stateid = '".$stid."' GROUP BY ezcity"); 
    ?>
        <option value="0">-- Select Locality --</option>
    <?php
        while($row = mysql_fetch_array($query))
        {
    ?>
        <option value="<?php echo $row['id']?>"><?php echo $row['ezcity']?>        </option> 
        <?php
        }
    }
    ?>

【讨论】:

  • 你是一个开始,我将修改你的答案并重新发布它,因为我看到了一些我刚刚删除的东西,它对我有用
【解决方案2】:

如果您想要一个更动态的解决方案(将适应对后台数据库的更改),您可以在您的页面上执行以下操作:

<script>
        function changeSecond(first){
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
        {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            var res=xmlhttp.responseText;
            document.getElementById("second").innerHTML=res;
            }
          }
        xmlhttp.open("GET","second_script.php?first="+first,true);
        xmlhttp.send();
        }
        </script>
...
<select onChange="changeSecond(this.value)">
<option value="Degree">Degree</option>
<option value="City">City</option>
</select>
<div id="second"><select><option value=""></option></select></div>

然后是类似以下的脚本:

<?php
//database connection
$first=mysql_real_escape_string($_REQUEST["first"]);
$query="SELECT ".$first." FROM tablename GROUP BY ".$first;
$data=mysql_query($query);
echo "<select>";
while($row=mysql_fetch_row($data)){
echo "<option value=\"".$row[0]."\">".$row[0]."</option>";
}
echo "</select>";
?>

我猜为了真正的灵活性,您还想在另一个类似于上面的脚本中使用 mysql_field_name 动态填充第一个

【讨论】:

  • 嗨,我尝试了你的建议,但仍然遇到同样的问题,即第二个下拉列表根本没有填充。有什么办法可以调试代码吗? .事实上,我认为onChange 调用不会发生,因为链接second_script.php?first= 不会在从第一个下拉列表中选择值时显示。
  • 不显示是什么意思?如果您(临时)替换 changeSecond 中的代码以弹出警告框怎么办? (以确认正在调用该函数)...另外,也许可以按原样发布您的代码,以便我们更好地了解什么不起作用
  • 哦,你是从服务器运行这些,还是在本地运行?
  • 本地。替换onChange="javascript: alert('On Load event fired!')" 会弹出一个警报窗口。添加了我的代码。请建议我如何去做
【解决方案3】:

您可以预先加载和隐藏所有需要的下拉菜单,并在第一个下拉菜单中触发“更改”事件时显示它们,或者有两个下拉菜单并在同一个“更改”事件上将其清空。

如果您选择第二种方法,您应该缓冲要插入下拉列表的数据,部分或全部

【讨论】:

    【解决方案4】:

    您可以为此目的使用 ajax

    eg1.html

        <html>
        <head><title></title>
        </head>
        <body>
        <form method="POST" action="" name="mainForm">
        <table>
            <tr>
                <td> Filter by: </td>
                <td>
                    <div id="first">
                       <select id="first_dropdown">
                          <option value="All">All</option>
                          <option value="Degree">Degree</option>
                          <option value="City">City</option>
                       </select>
                </td>
             </tr>
             <tr>
                <td>&nbsp</td>
                <td>
                   <div id="second">
                      <select id="second_dropdown">
    
                      </select>
                   </div>
                </td>
             </tr>
          </table>
       </form>
    </body>
    </html>
    
        <script src = "https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('#first_dropdown').change(function(){
                $.ajax({
                    'type' : 'post',
                    'url' : 'getDropdownOptions.php',
                    'data': 'first=' + $(this).val(),
                    'success' : function(data) {
                        $('#second_dropdown').html(data);
                    }
                 });
              });
            });
        </script>
    

    getDropdownOptions.php

        <?php
    
        $link = mysql_connect("localhost", "root", "");
    
        if (!$link) {
            die('Could not connect: ' . mysql_error());
        }
        if (mysql_select_db("myDatabase", $link)) {
            $first = mysql_real_escape_string($_REQUEST["first"]);
            $query = "SELECT " . $first . " FROM myTable GROUP BY " . $first;
            $data  = mysql_query($query);
    
            $rtn_data = '';
            while ($row = mysql_fetch_row($data)) {
                $rtn_data .= "<option value=\"" . $row[0] . "\">" . $row[0] . "        </option>";
            }
            echo $rtn_data;
            exit;
        }
        echo mysql_error();
    
        ?>
    

    【讨论】:

      【解决方案5】:
      Divyesh here, your answer is
      ==============================
      edit.php
      ==============================
      <!-- edit.php -->
      <?php
      include("config.php");
      $id=$_REQUEST['id'];
      echo $id;
      $query=mysqli_query($con,"SELECT * FROM register r
      INNER JOIN country c ON r.cuid = c.cuid
      INNER JOIN state s ON r.sid = s.sid
      INNER JOIN city ct ON r.cid = ct.cid where id='$id'");
      
      while($r=mysqli_fetch_array($query))
      {
      
           $fn=$r['firstname'];
           $add=$r['address'];
           $gn=$r['gender'];
           $hobby=$r['hobby'];
           $h=explode(',',$hobby);
           $q=array('reading','traveling','cricket','drawing');
           $country=$r['cuid'];
           $state=$r['sid'];
           $city=$r['cid'];
           echo $gn;
           $edu= $r['education'];
           $email=$r['email'];
           $pass=$r['password'];
           $conpass=$r['conpassword'];
           $phno=$r['phoneno'];
      }
      
      ?>
      <html>
      <head>
          <script src="jquery.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
      
          $('#country').on('change',function(){
              var countryID = $(this).val();
              if(countryID){
                  $.ajax({
                      type:'POST',
                      url:'ajaxData.php',
                      data:'cuid='+countryID,
                      success:function(html){
                          $('#state').html(html);
                          $('#city').html(html); 
                      }
                  }); 
              }else{
                  $('#state').html(html);
                  $('#city').html(html); 
              }
          });
      
          $('#state').on('change',function(){
              var stateID = $(this).val();
              if(stateID){
                  $.ajax({
                      type:'POST',
                      url:'ajaxData.php',
                      data:'sid='+stateID,
                      success:function(html){
                          $('#city').html(html);
                      }
                  }); 
              }else{
                  $('#city').html(html); 
              }
          });
      });
      </script>
      </head>
          <body>
              <form method="post" action="update.php">
                  <table border="1" align="center">
                  <caption>Edit user data</caption>
                  <tr>
                      <td>First name</td>
                      <td><input type="text" name="fn" value="<?php echo $fn;?>"></td>
                  </tr>
                  <tr>
                      <td>Address</td>
                      <td><input type="text" name="add" value="<?php echo $add;?>"></td>
                  </tr>
                  <tr>
                      <td>Gender</td>
                      <td><input type="radio" name="gn" value="male" <?php echo ($gn=='male')?'checked':'' ; ?> size="17">Male
                      <input type="radio" name="gn" value="female" <?php echo ($gn=='female')?'checked':'' ; ?> size="17">Female
                      </td>
                  </tr>
                  <tr>
                      <td>Hobby</td>
                      <td><input type="checkbox" name="hobby[]" value="reading" <?php if(in_array('reading',$h)){echo ("checked:'checked'");}?> >reading
                      <input type="checkbox" name="hobby[]" value="traveling" <?php if(in_array('traveling',$h)){echo ("checked:'checked'");}?> >traveling
                      <input type="checkbox" name="hobby[]" value="cricket" <?php if(in_array('cricket',$h)){echo ("checked:'checked'");}?> >cricket
                      <input type="checkbox" name="hobby[]" value="drawing" <?php if(in_array('drawing',$h)){echo ("checked:'checked'");}?> >drawing</td>
                  </tr>
                  <?php
                  $query = mysqli_query($con,"SELECT * FROM country");
      
                  //Count total number of rows
                  $rowCount = mysqli_num_rows($query);
                  ?>
                  <td>Country</td>
                  <td><select name="country" id="country">
                      <option value="<?php echo $country;?>"><?php echo $country;?></option>
                      <?php
                      if($rowCount > 0)
                      {
                          while($row = mysqli_fetch_array($query))
                          { 
                              echo '<option value="'.$row['cuid'].'">'.$row['country'].'</option>';
                          }
                      }
                      else
                      {
                          echo '<option value="">Country not available</option>';
                      }
                      ?>
                  </select>
                  </td></tr>
                  <tr>
                  <td>State</td>
                  <td>
                  <select name="state" id="state">
                      <option value="<?php echo $state;?>"><?php echo $state;?></option>
      
                  </select>
                  </td></tr>
                  <tr>
                  <td>City</td>
                  <td>
                  <select name="city" id="city">
                      <option value="<?php echo $city;?>"><?php echo $city;?></option>
      
                  </select>
                  </td>
                  </tr>
                  <tr>
                      <td>Education</td>
                      <td><input type="text" name="edu" value="<?php echo $edu;?>"></td>
                  </tr>
                      <td>Email</td>
                      <td><input type="text" name="email" value="<?php echo $email;?>"></td>
                  </tr>
                  <tr>
                      <td>Password</td>
                      <td><input type="text" name="pass" value="<?php echo $pass;?>"></td>
                  </tr>
                  <tr>
                      <td>Confirm password</td>
                      <td><input type="text" name="conpass" value="<?php echo $conpass;?>"></td>
                  </tr>
                  <tr>
                      <td>Phone no</td>
                      <td><input type="text" name="phno" value="<?php echo $phno;?>"></td>
                  </tr>
                  <tr>
                      <td><input type="hidden" name="id" value="<?php echo $id;?>">
                      <input type="submit" name="update" value="update"></td>
                  </tr>
                  </table>
              </form>
          </body>
      </html>
      
      ================
      <h3>ajaxData.php</h3>
      ================
      <!--ajaxData.php-->
      <?php
      //Include database configuration file
      include("config.php");
      
      if(isset($_POST["cuid"]) && !empty($_POST["cuid"]))
      {
          //Get all state data
          $query = mysqli_query($con,"SELECT * FROM state WHERE cuid = ".$_POST['cuid']."");
      
          //Count total number of rows
          $rowCount = mysqli_num_rows($query);
      
          //Display states list
          if($rowCount > 0)
          {
              echo '<option value="">Select state</option>';
              while($row =  mysqli_fetch_array($query))
              { 
                  echo '<option value="'.$row['sid'].'">'.$row['state'].'</option>';
              }
          }
          else
          {
              echo '<option value="">State not available</option>';
          }
      }
      
      if(isset($_POST["sid"]) && !empty($_POST["sid"]))
      {
          //Get all city data
          $query = mysqli_query($con,"SELECT * FROM city WHERE sid =".$_POST['sid']."");
      
          //Count total number of rows
          $rowCount = mysqli_num_rows($query);
      
          //Display cities list
          if($rowCount > 0)
          {
              echo '<option value="">Select city</option>';
              while($row = mysqli_fetch_array($query))
              { 
                  echo '<option value="'.$row['cid'].'">'.$row['city'].'</option>';
              }
          }
          else
          {
              echo '<option value="">City not available</option>';
          }
      }
      ?>
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2017-10-16
        • 1970-01-01
        • 2018-03-12
        • 2012-11-08
        • 2015-03-14
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多