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

时间:2015-12-08 16:00:50

标签: javascript php

您好我有2个下拉菜单,我想填充我的第二个下拉菜单项与我的第一个下拉菜单项相关。我的意思是我的第一个下拉菜单项目是 Apple,三星,HTC,诺基亚等。当我选择由 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>';
    }
}
?>

1 个答案:

答案 0 :(得分: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注入!!