Question

动态添加更多下拉列表，该下拉列表在按钮点击时填充了来自MySQL的数据到div。

<div id="dynamicDiv"><p>
        sqlconn();
        $sql="SELECT column_name FROM table";
        $result = mysql_query($sql);
        $num_rows = mysql_num_rows($result);
        echo "<select type=\"column_name\">";       
        for($i=0;$i<$num_rows;$i++){
            $table = mysql_fetch_array($result);
            echo "<option value='" . $table['column_name'] . "'>" . $table['column_name'] . "</option>";
        }
        echo "</select>";
        mysql_close($con);
</div>

<input type="button" value="+ Data" onClick="addInput('dynamicDiv');">

我知道的唯一方法是编写脚本，但我不能在脚本上做任何PHP脚本（或者我可以？）。需要查询以填充添加的下拉列表。

var counter = 1;
var limit = 15;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "whatever needs to be dynamically input on div";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

是否有解决方法来填充脚本中的下拉列表？非常感激！

Answer 1

你基本上有2个选项

在创建页面时为下拉列表创建HTML并执行类似

，如

<script type=...>
var selecthtml='<?php echo $selecthtml; ?>'
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = selecthtml;
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}
</script>

或者查看AJAX以填充您的选择。

前者更容易，后者更清洁。

Answer 2

**This is the actual way the test goes and Change according to your table and use it . It will work as you expected**

“; echo'countStud ='。count（$ arrayData）。';'; echo'stud ='。json_encode（$ arrayData）。';'; echo“”; ？＆GT;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
    divCount =0;   
    function createDiv()
    {  

        var divTag  = document.createElement("div");
        var studList ="";
         studList += '<select id="BOX_'+divCount+'" name="BOX_'+divCount+'">';
         studList += '<option value="">--- Select ---</option>';
                     for(i=0;i<countStud;i++){
                        studList += '<option value="'+stud[i].stud_id+'">'+stud[i].stud_name+'</option>';
                     }
         studList += '</select>';
         divTag.innerHTML  = studList;
        document.getElementById('dynamicElements').appendChild(divTag);
        divCount++;

    }

 </script>
</head>

<body>
<form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
<div id="dynamicElements"></div>
 <input type="submit" value="Submit" />
 </form>
 <input type="button" onClick="createDiv()" value="Add"/>
</body>
</html>

PHP + Javascript动态div，用于动态添加表单中的输入

2 个答案: