Question

按钮在div中动态添加更多下拉列表（通过访问MySQL数据库填充）？有点复制最初的那个。

我已经设法使用javascript复制只有文本框的div（因此它们更容易，无需访问数据库）。 javascript做了重复。

下面是javascript

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 = "Type: <input type='text' name='types[]'> <br> Desc: <input type='text' name='descs[]'> <p>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

我面临的问题是dropdownlist +通过javascript中的数据库填充。下面是我希望复制的下拉列表

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

Answer 1

为什么你不使用AJAX呢？创建下拉元素，向服务器发送下拉项目请求，get'em并填充列表。

Answer 2

<html>
    <script type="text/javascript" >
    var counter = 1;
    var limit = 15;


    function inAdd(divName){

         if (counter == limit)  {
              alert("You have reached the limit of adding " + counter + " inputs");
         }
         else {
              var newdiv = document.createElement('div');
              newdiv.innerHTML = "Type: <input type='text' name='types[]'> <br> Desc: <input type='text' name='descs[]'> <p>";
              document.getElementById(divName).appendChild(newdiv);
              counter++;
         }
    }
    </script>
    <div id="foobar">
        <input type="button" value="click" onclick="inAdd('foobar')" />
    </div>
    </html>

试试这个，动态添加文本框..你要添加的任何内容 - 你需要通过ajax从服务器获取它......或者从按钮上的onclick获取它...希望这是问题你面对的是什么..

Answer 3

您可以采用以下示例并对其进行修改。请注意这样一个事实，即我注释掉了对DB的调用并且只打印了一个“假的”dropbox：

<?php
function getDropbox(){
    $res = "";
    /*sqlconn();
    $sql="SELECT type FROM products";
    $result = mysql_query($sql);
    $num_rows = mysql_num_rows($result);
    $res = "<select type=\"type\">";
    for($i=0;$i<$num_rows;$i++){
        $products = mysql_fetch_array($result);
        $res += "<option value='" . $products['type'] . "'>" . $products['type'] . "</option>";
    }
    $res += "</select>";
    mysql_close($con);*/
    $res = "<select type=\"type\"><option value='sas'>kiki</option>";
    return $res;
}

  echo "<html><body>    <table><form action=\"\" method=\"POST\"><tr><td>";


  if(isset($_POST["check1"]) && $_POST["check1"] == "Yes"){
    $create = $_POST["check1"];
  }
  if(isset($_POST['num'])){
    $numOfDropboxes = $_POST["num"];
  }

  if ($numOfDropboxes == NULL){
          $numOfDropboxes=1;
  }
  if ($create != NULL){
      $numOfDropboxes++;
  }
  for($i=0; $i < $numOfDropboxes; $i++){
      $dropbox = getDropbox();
        echo "<tr><td>".$dropbox."</td></tr>";
  }
  echo "create = $create [".$_POST['check1']."] and numOfDropboxes = $numOfDropboxes </br>";

  echo "</td> </tr><tr><td><input type=hidden id=\"num\" name=\"num\" value=\"$numOfDropboxes\" /><input type=checkbox id=\"check1\" name=\"check1\" value=\"Yes\" />Click here if you want to create a dropbox</td> </tr>";
  echo "<tr><td><input type=\"submit\" value=\"Submit\"/></td></tr>";
  echo "</form></table></body></html>";
?>

按钮动态复制填充在php上的div中的下拉列表

3 个答案: