php - 当用户按下创建按钮时，将数据加载到 html 中选择

Question

当用户按下或单击按钮时，我在将数据加载到 html 选择时遇到问题。这是场景：

1. 有按钮动态创建按钮
2. 当用户单击该按钮时，将显示表单
3. 当表单显示时，有一个 html 选择动态显示数据库中的数据，使用 php 作为服务器端。

有谁知道如何解决场景3？

我使用 jquery 创建新表单，但将数据加载到 html select 对我来说真的很痛苦。

Answer 1

你可以使用 jquery ajax：

$.ajax({url:'somepage.php'}).done(msg){
    $('#select_id').html(msg);
}

在 somepage.php 页面上生成 html 并回显它：

<?
   echo '<option>something</option>';
?>

就这样

Answer 2

试试这样的 AJAX：

$.post("yourPHP.php", {toSend: whatever}, function(data){
vOutput="<select>";
for(var i=0;i<data.length;i++){
    vOutput+="<opiton>"+data[i]+"</option>";
}
vOutput+="</select>"
$("#yourdiv").html(vOutput);
},'json')

Answer 3

如果您从服务器<select>通过html（如“12 ..”）获取选项，则（使用 jquery）：

$.ajax({url:"index.php",
   success:function(data) {
      $("#my_select").html(data);
   }
});

如果您<select>通过类似数组的值（也许是 json）获得选项，那么：

...
<script type="text/javascript"> 
   var values = {option1:{value:"value1",text:"text1"},option2:{value:"value2",text:"text2"},option3:{value:"value3",text:"text3"}};   // lets say these came from server (a json response)
    var d = $("#my_select")[0];
    d.length = 0;
    var c=0;
    for(var x in values) {
       d.options[c++] = new Option(values[x]["text"],values[x]["value"]);
    }
</script>    

Answer 4

你的 JS 应该是这样的。

 $('#button').click(function(){
     $('<element to show>').show();
     $('<element to load the data into>').load('my_page.php');
 });

您的my_page.php

<?php
$data = get_data_from_db();
foreach ($data as $d){
    echo '<option value='+ $d['value'] +'>'+ $d['text'] +'</option>';
}
?>

Answer 5

PHP

像这样的东西：

<?php  
$option[] = array('option1'=>'somepage1',
                  'option2'=>'somepage2',
                  'option3'=>'somepage3');

echo json_encode(array('options'=>$option)) //set output to json encode
?> 

JS

$(document).ready(function(){

  $("#create").bind('click',function(){
    $.get('somepage.php',function(data){
      $("#form").show(); //form holder
      $("#select").empty();
      $.each(data.options, function(i,val){
       $("#select").append("<option>"+val.option1+"</option>"
                          +"<option>"+val.option2+"</option>"
                          +"<option>"+val.option3+"</option>");
      });  
    },'json');
    $(this).unbind();
  });
});