CODEWITHSUNDEEP
javascriptphpmysqlmysqli
user3097736
user3097736

Reputation: 284

Dynamic dropdownlist value from database

How I can connect the value of my main dropdown into sub dropdown. Value of dropdown is from the database main_list and sub_list tables. And also the body onload is not working.

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

And this my Code

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>

Upvotes: 4

Views: 3307

Answers (2)

Chandresh M
Chandresh M

Reputation: 3828

Check below Code :

First Listbox code Would be as below: 

<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 code Would be as below: 

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

Code in secondlist.php page : 

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

Some changes may be required related to your requirements, but it will definitely work for you.

Let me know if you have any query!

Thanks!

Upvotes: 2

deepak
deepak

Reputation: 346

you can use ajax on this on the change of main you can call a function which get response through ajax and print that on your page that is the standard solution

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

Call run function at the change of main category selection

For more help! google. It is not rocket science

Upvotes: -1

Related Questions