数据库中的动态下拉列表值

user3097736 发表于 Dev

用户名

如何将主下拉菜单的值连接到子下拉菜单。下拉列表的值来自数据库main_list和sub_list表。而且身体的负荷也不起作用。

主列表

id  |  value  | id_no  
1   |  colors |  1   
2   |  fruits |  2  
3   |  animals|  3
4   |  flowers|  4

子清单

id  |  value  | category  
1   |  red    |  1   
2   |  blue   |  1  
3   |  mango  |  2
4   |  banana |  2
5   |  cat    |  3   
6   |  dog    |  3  
7   |  lotus  |  4
8   |  lily   |  4

这是我的代码

PHP的：

<body onload="run()">
    <form id="form1" name="form1" method="post" action="<?php $_SERVER['PHP_SELF']?>">
        Drop1
        <?php
        $mysqli = new mysqli("localhost", "root", "", "lists");
        $result = $mysqli->query("SELECT * FROM main_list GROUP BY id ORDER BY id");
        $option = '';
        while($row = $result->fetch_assoc())
        {
           $option .= '<option value = "'.$row['value'].'">'.$row['value'].'</option>';
        }
        ?>
        <select id="main" name="main" onchange="run()">  <!--Call run() function-->
        <option selected=selected>Choose</option>
        <?php echo $option; ?>
        </select><br><br>

<?php
if (isset($_POST['main'])) {
        $mysqli = new mysqli("localhost", "root", "", "lists");
        $result1 = $mysqli->query("SELECT * FROM sub_list GROUP BY value ORDER BY id");
    $option1 = '';
    while($row = $result1->fetch_assoc())
    {
        $option1 .= '<option value = "'.$row['value'].'">'.$row['value'].'</option>';
    }
}
    echo 'Drop2 ';
    echo '<select name="sub" id="sub"  onchange="run()">
          <option value=" " disabled="disabled" selected="selected">Choose one</option>';
    echo $option1;
    echo '</select> ';
?>
<input type="submit" name="submit" value="Submit" />
    </form>

Javascript：

<script type="text/javascript">
     function run(){
          document.getElementById('form1').change()
     }
</script>

钱德雷什M

检查以下代码：

第一个列表框代码将如下所示：

<form id="form1" name="form1" method="post" action="<?php $_SERVER['PHP_SELF']?>">
 Drop1
 <?php
    $mysqli = new mysqli("localhost", "root", "", "lists");
    $result = $mysqli->query("SELECT * FROM main_list GROUP BY id ORDER BY id");
    $option = '';
    while ($row = $result->fetch_assoc()) {
       $option .= '<option value = "'.$row['value'].'">'.$row['value'].'</option>';
    }
    ?>

     <select id="main" name="main">
     <option selected=selected>Choose</option>
       <?php echo $option; ?>
     </select>
    <div id="sublist"></div>

   <input type="submit" name="submit" value="Submit" />
</form>

jQuery代码将如下所示：

    $('#main').change(function(){
        $.ajax({
        url : 'secondlist.php',
        data :{mainlist_id : $(this).val()},
        dataType:'html',
        type:'POST',
        success:function(data){
         $('#sublist').html(data);
        }
      });
   });

secondlist.php页面中的代码：

    $mysqli = new mysqli("localhost", "root", "", "lists");
    $result1 = $mysqli->query("SELECT * FROM sub_list as s, main_list as m where s.category_id = m.id and s.category_id = $_POST['mainlist_id'] GROUP BY value ORDER BY id ");
    $option1 = '';

    while ($row = $result1->fetch_assoc()) {
        $option1 .= '<option value = "'.$row['value'].'">'.$row['value'].'</option>';
    }

    $output = 'Drop2 ';
    $output .= '<select name="sub" id="sub">';
    $output .= '<option value=" " disabled="disabled" selected="selected">Choose one</option>';
    $output .= $option1;
    $output .= '</select> ';
echo $output;
exit;
?>