如何使用JQuery动态创建选择选项?

时间:2016-11-16 16:28:09

标签: php jquery

form.php的

echo("<div id='myDv'>");
echo("<select id='mySelect'>");
   echo("<span id='mySpan'>");

        //here I want dynamically generated option values

   echo("</span>");
echo("</select>");
echo("</div>");

myJquery.js

$.post('Process.php', $(this).serialize(), function(data){

      $('#mySpan').html(data);// I tried, but does'nt work

}).fail(function() {alert( "Some Problem Occured" );});

Process.php

$strSql="SELECT Id, Title FROM mytable";
$result=mysql_query($strSql);
while($rowSet=mysql_fetch_array($result)) {
    echo("<option value=".$rowSet['Id'].">".$rowSet['Title']."</option>");
}

我的要求是使用在Process.php中获得的 ID 标题来创建将在 Form.php中显示的选项

我的代码需要进行哪些更改? 如何在myJquery.js中访问 $ rowSet Process.php ,以创建我想在Form.php中显示的选项

1 个答案:

答案 0 :(得分:0)

服务器端处理

文件名: Process.php

首先,我们使用您在上面编写的相同查询来获取数据

$data=array();
$strSql="SELECT Id, Title FROM mytable";
$result=mysql_query($strSql);
while($rowSet=mysql_fetch_array($result)) {
   $option=array("id"=>$rowSet["Id"],"Title"=>$rowSet["Title"]);
   $data[]=$option;
}
echo json_encode($json_data);

客户端处理 我正在使用jquery及其更改事件。我正在循环json编码数据以从中提取Id和Title。

    <select id="getOptions"></select>
    <script>
    $("#getOptions").change(function(e){
     $.ajax({
        url:"Process.php",
        success:function(data){
        console.log(data);
       for(var i=0;i>=data.length;i++){
        $("#getOptions").append("<option value='"+data[i]["Id"]+"'>"+data[i]["Title"]+"    </option>");
       }
      },
    error:function(err){
     alert(err);
      }
    });
});
    </script>