如何从数据库中填充下拉菜单项

Question

Hi i have 2 dropdown menu and i want populate my 2nd dropdown menu items with my 1st dropdown menu item related. I mean my 1st dropdown menu items are Apple, Samsung, HTC, Nokia etc. When i select Apple dropdown menu items populated by iPhone 6s, iPhone 5s, iPhone 4s etc. I can't explain it very well in english. Sorry my bad english. I populated my 1st dropdown menu from database

function selectFactor(){
    $result = @mysql_query("SELECT * from Factors");
    while($record = @mysql_fetch_array($result)){
        echo '<option value="'.$record['FactorID'].'">'.$record['FactorName'].'</option>';
    }
}

and display result in html file

<select name="dropdown" id="dropdown" onchange="bla()">
<?php selectFactor(); ?>
</select>

and i just try something with it bla bla bla...

function bla(){
    var e = document.getElementById("dropdown");
    var elementValue = e.options[e.selectedIndex].value;
    console.log(elementValue);
}

how can i populate 2nd dropdown menu when 1st index is changed? UPDATED!

<?php
$name = $_POST['selectedItem'];
function selectSum(){
$result = @mysql_query("SELECT * from factor INNER JOIN sumd ON factor.factorID=model.factorID where factorNer='$name'");
    while($record = @mysql_fetch_array($result)){
        echo '<option value="'.$record['factorID'].'">'.$record['modelNer'].'</option>';
    }
}
?>

Answer 1

You need to query your database for the selected item: get_data.php is the file you have to create where you will query your database.

You ont need this:

onchange="bla()

Just an ajax call:

$(document).ready(function(){
   $('#dropdown').change(function(){
       var selectedItem = $(this).val()  //your item id

        $.ajax({
            url: 'get_data.php',
            data : selectedItem,
            dataType: "json",
            type : 'POST',
        })
        .done(function(data) {
             //put the returned data in the second selectbox
            var output = '';
            $.each(data, function(i, el){
                output += '<option value="'+el.name+'">'+el.name+'</option>'
           //where 'name' is at moment the placeholder of your returned data   
            })
            $('#dropdown2').html(output)
        })
        .fail(function() {
            console.log("error");
        })
   })
})

If you are ready with your query and don't know how to put the returned data into the second selectbox, I will also help you with it.

NOTE: this is your second select that has to be populated you need an unique ID in it:

<select name="dropdown2" id="dropdown2">
    //here will be the output of the available options
</select>

One Important notice:

I advise you (when you have this working) to switch to mysqli and not use mysql anymore. This is a SECURITY ISSUE and you are potentially vulnerable for mysql injection!!