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

Question

嗨，我有 2 个下拉菜单，我想用第一个下拉菜单项相关来填充我的第二个下拉菜单项。我的意思是我的第一个下拉菜单项是 Apple、Samsung、HTC、Nokia 等。当我选择由 iPhone 6s、iPhone 5s、iPhone 4s 等填充的 Apple 下拉菜单项时。我无法用英语很好地解释它。抱歉我的英语不好。我从数据库填充了第一个下拉菜单

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

并在html文件中显示结果

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

我只是用它尝试一些东西 bla bla bla...

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

当第一个索引更改时，如何填充第二个下拉菜单？ 已更新!

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

您需要在数据库中查询所选项目: get_data.php 是您必须创建的文件，您将在其中查询数据库。

你不需要这个:

onchange="bla()

只是一个ajax调用:

$(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");
        })
   })
})

如果您准备好查询，但不知道如何将返回的数据放入第二个选择框，我也会帮助您。

注意:这是您必须填充的第二个选择，您需要在其中提供唯一的 ID:

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

一个重要通知:

我建议你(当你有这个工作时)切换到 mysqli 并且不再使用 mysql。这是一个安全问题，您可能容易受到 mysql 注入(inject)的攻击!!