来自数据库的动态下拉列表值

时间:2013-12-27 05:33:11

标签: javascript php mysql mysqli

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

Main_list

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

SUB_LIST

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>

2 个答案:

答案 0 :(得分:1)

检查以下代码:

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

<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;
?>

可能需要对您的要求进行一些更改,但它肯定适合您。

如果您有任何疑问,请与我们联系!

谢谢!

答案 1 :(得分:-1)

你可以在更改main时使用ajax你可以调用一个通过ajax获取响应的函数并在你的页面上打印那个标准解决方案

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function run(id){
    $.ajax({
      type:'GET',
      url:'phpfile_to_make_combobox.php&pid='+id,
      success:function(strHtml)
      {
        $('.div_to_put_combobox').html(strHtml);
      }
   });
}


</script>

更改主要类别选择时调用运行功能

获取更多帮助!谷歌。这不是火箭科学