在 JavaScript 中使用 MySQL 数据库中的数据填充下拉列表

populate drop down lists with data from mysql database in javascript

本文关键字:数据 填充 数据库 下拉列表 MySQL JavaScript      更新时间:2023-09-26

我正在创建一个表单,它要求候选人发布有关他们以前的教育历史的信息 - 这是表单的屏幕截图和附加到他们的代码!

[IMG]http://i58.tinypic.com/ege104.png[/IMG]

[IMG]http://i59.tinypic.com/fxuf5w.png[/IMG]

这是我的javascript代码:

<script>
function removeFields1(){
//var container1 = document.getElementById("container1");
//container1.removeChild(input);

}
    function addFields1(){
        var container = document.getElementById("container1");
        var option = document.createElement("select"); //? how do I fix this up

        //option.text = "Kiwi";
        //container.add(option);
        container.appendChild(option);//? how do I fix this up

        container.appendChild(document.createTextNode("Address: "));//Address form
        var input = document.createElement("input");
        input.type = "text";
        input.id = "instaddress";
        input.name = "instaddress";
        input.size = 20;
        input.maxlenth = 20;
        container.appendChild(input);
        container.appendChild(document.createTextNode("From: "));   // which year the person started        
        var from = document.createElement("input");                 // studying in that institution
        from.type = "text";
        from.id = "from";
        from.name = "from";
        from.size = 4;
        from.maxlenth = 4;
        container.appendChild(from);
        container.appendChild(document.createTextNode("To: "));     // which year the person finished 
        var to = document.createElement("input");                   // studying in that institution
        to.type = "text";
        to.id = "to";
        to.name = "to";
        to.size = 4;
        to.maxlenth = 4;
        container.appendChild(to);
        container.appendChild(document.createTextNode(" Did You Graduate?: Yes"));    // radio buttons whether someone graduated or not          
        var grad = document.createElement("input");
        grad.type = "radio";
        grad.id = "graduate";
        grad.name = "graduate";
        grad.value = "yes"; //yes value for radio button
        container.appendChild(grad);
        container.appendChild(document.createTextNode(" No "));
        var grad1 = document.createElement("input");
        grad1.type = "radio";
        grad1.id = "graduate";
        grad.value = "no"; //no value for radio button
        container.appendChild(grad1);
        container.appendChild(document.createTextNode(" Certificate: "));
        var certificate = document.createElement("input");
        certificate.type = "text";
        certificate.id = "certificate";
        certificate.name = "certificate";
        input.size = 25;
        input.maxlenth = 25;
        container.appendChild(certificate);
        var addInstitution = document.getElementById(" Add");
        var removeInstitution = document.getElementById("Remove");
     //  container.removeChild(addInstitution);
        //create and insert input/text
        //create and insert button
        addInstitution = document.createElement("a");
        addInstitution.id="Add"
        addInstitution.href="#";
        addInstitution.text="Add";
        addInstitution.onclick=function(){addFields1();};
        removeInstitution = document.createElement("a");
        removeInstitution.id="Remove"
        removeInstitution.href="#";
        removeInstitution.text=" Remove";
        container.appendChild(addInstitution);
        container.appendChild(removeInstitution);
        //removeInstitution.onclick=function(){removeFields1();};
        //
        container.appendChild(document.createElement("br"));
    }
</script>

以下是表单字段:

    <body>
        <form>
            <div id="container1">
        <select name="institution" id="institution">
<option <?php if(isset($_POST['institution'])) { echo $_POST['institution']; } ?>>Select Institution</option>
<?php
$sql1a = "SELECT * FROM institution ORDER BY institution asc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
if($row1a['institution']==$_GET['id3'])
echo("<option selected value=$row1a[institution]>$row1a[institution]</option>");
else
echo("<option value=$row1a[institution]>$row1a[institution]</option>");
}
?>
</select>
Address: <input size="20" type="text" id="instaddress" name="instaddress" maxlength="20" size="20"> From:<input type="text" id="from" name="from" size="4" > To: <input type="text" id="to" name="to" size="4">
Did You Graduate?: Yes<input type="radio" onclick="checkRadio()" id="graduate" name="graduate" value="yes"> No
<input type="radio" onclick="checkRadio()" id="graduate" name="graduate" value="no"> Certificate: <input size="20" type="text" id="certificate" name="certificate" maxlength="25" size="25">
               <a href="#" id="Add" onclick="addFields1()">Add </a><br>
            </div>
        </form>
    </body>

当我单击addFields1()时,如何为 Javascript 部分创建下拉选择菜单?

下拉菜单的PHP代码在下面 - 菜单填充了来自MySQL数据库的数据。什么是正确的

 <option <?php if(isset($_POST['institution'])) { echo $_POST['institution']; } ?>>Select Institution</option>
<?php
$sql1a = "SELECT * FROM institution ORDER BY institution asc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
if($row1a['institution']==$_GET['id3'])
echo("<option selected value=$row1a[institution]>$row1a[institution]</option>");
else
echo("<option value=$row1a[institution]>$row1a[institution]</option>");
}
?>
</select>

你们中的任何人可以帮助我修复Javascript代码吗?

以下是需要更正的代码片段,以便每次按下"添加"链接时,我都可以使用 Javascript 函数下拉菜单列表:

 var option = document.createElement("select"); //? how do I fix this up
 var option = document.createElement("select"); //? how do I fix this up
 //option.text = "Kiwi";
 //container.add(option);
 container.appendChild(option);//? how do I fix this up

你的意思是这样的?

var slct = document.createElement("select"); //? how do I fix this up
container.appendChild(slct);//? how do I fix this up
//some php code that is generating js code
<?php
    $sql1a = "SELECT * FROM institution ORDER BY institution asc";
    $smt1a = $dbs->prepare($sql1a);
    $smt1a -> execute();
    while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
    {
        echo("var opt=document.createElement('"option'");'r'n");
        echo("opt.value=$row1a[institution];'r'n");
        echo("opt.text =$row1a[institution];'r'n");
        echo("slct.appendChild(opt);");
    }
?>
slct.value=<?php echo $_GET['id3']; ?>;

我希望这会有所帮助/