Multiple nested dropdown menu from MySQL

Question

I have the following php page with four dropdown list correctly populated with four differents mysql query. I would populate Categories_2 through a query depending on CATEGORIES_1.c_id and the same nested for others dropdown.

Tried to call myFunction() onChange but it seems not working. I don't get the alert.

Does anyone know how I could do this? Any help would be much appreciated.

I know I have to use mysqli but it's an existing page and I will do it later.

<script>
var myDropdown=document.getElementsByName('cat1')[0];
function myFunction(){
    alert('option changed : '+myDropdown.value);
}
</script>



<form enctype="multipart/form-data" method="post" action="import.php">

        <label for="cat_name">Categories_1</label>
        <select name = "cat1" onChange="myFunction()">
        <?php
            $s = mysql_query("SELECT * FROM `CATEGORIES_1`");
            while($row = mysql_fetch_assoc($s)) {
            echo ('<option value="' . $row['c_id'] . '">' . $row['c_name'] . '</option>'); } ?>
        </select>
        <br>            

        <label for="cat_nam">Categories_2</label>
        <select>
        <?php
            $s = mysql_query("SELECT c_name FROM `CATEGORIES_2`");
            while($row = mysql_fetch_assoc($s)) {
            echo ('<option value="0">' . $row['c_name'] . '</option>'); }            ?>
        </select>
        <br>            

        <label for="cat_nae">Categories_3</label>
        <select>
        <?php
            $s = mysql_query("SELECT c_name FROM `CATEGORIES_3`");
            while($row = mysql_fetch_assoc($s)) {
            echo ('<option value="0">' . $row['c_name'] . '</option>'); } ?>
        </select>
        <br>            

        <label for="cat_ame">Categories_4</label>
        <select>
        <?php
            $s = mysql_query("SELECT c_name FROM `CATEGORIES_4`");
            while($row = mysql_fetch_assoc($s)) {
            echo ('<option value="0">' . $row['c_name'] . '</option>'); }            ?>
        </select>

Demonyowh · Accepted Answer · 2015-07-02 05:47:58Z

You need to use ajax for that .. i hope this helps ..

JS

$(document).ready(function(){
    $(document).on('change','#cat1',function(){
        $.ajax({
            cache: false,
            url: 'getSecondSelect.php',
            type: 'post',
            data: 'input=' + $(this).val(),
            success: function(data){
                $('#cat2').html(data)
            }
        })
    })
}

FORM

<form enctype="multipart/form-data" method="post" action="import.php">
    <label for="cat_name">Categories_1</label>
    <select id="cat1" name="cat1">
    <?php
        $s = mysql_query("SELECT * FROM `CATEGORIES_1`");
        while($row = mysql_fetch_assoc($s)) {
        echo ('<option value="' . $row['c_id'] . '">' . $row['c_name'] . '</option>'); }
    ?>
    </select>
    <br />

    <label for="cat_name">Categories_2</label>
    <select id="cat2" name="cat2"></select>
    <br />

getSecondSelect.php

$s = mysql_query("SELECT c_name FROM `CATEGORIES_2` WHERE CATEGORIES_1.c_id='".$_POST['input']."'");
while($row = mysql_fetch_assoc($s)) {
echo ('<option value="0">' . $row['c_name'] . '</option>'); }

Saty · Accepted Answer · 2015-07-02 05:23:45Z

0

This is wrong method to call your dropdoen value

var myDropdown=document.getElementsByName('cat1')[0];

Your myFunction would be

<script>
function myFunction(){
var myDropdown=document.getElementById('cat1');
  var myDropdowval= myDropdown[myDropdown.selectedIndex].value;
   alert(myDropdowval);
}
</script>

here you assign id id="cat1" to your dropdown

 <select name = "cat1" id="cat1" onChange="myFunction()">
    <?php
    $s = mysql_query("SELECT * FROM `CATEGORIES_1`");
    while ($row = mysql_fetch_assoc($s)) {
        echo ('<option value="' . $row['c_id'] . '">' . $row['c_name'] . '</option>');
    }
    ?>
</select>

answered Jul 2, 2015 at 5:23

Saty

22.5k7 gold badges35 silver badges52 bronze badges

Comments

dsk · Accepted Answer · 2015-07-02 05:33:10Z

0

Use ajax call and different php pages to generate response based on AJAX call, send selected drop-down id as parameter to php page. and set that incoming response to your below drop-downs. If your using Jquery then use

 $('[name=cat1]').val()

edited Jul 2, 2015 at 5:33

answered Jul 2, 2015 at 5:28

dsk

6371 gold badge7 silver badges20 bronze badges

Comments

Munna Babu · Accepted Answer · 2015-07-02 06:37:09Z

0

<select id="myselect">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>

alert($( "#myselect option:selected" ).text());

and here is working JSFIDDLE

edited Jul 2, 2015 at 6:37

answered Jul 2, 2015 at 5:34

Munna Babu

5,7766 gold badges31 silver badges44 bronze badges

2 Comments

milan kyada Over a year ago

Nothing is in your provided link

Munna Babu Over a year ago

sorry @milankyada now added link

Collectives™ on Stack Overflow

Multiple nested dropdown menu from MySQL

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related