Question

当用户按或单击按钮时，将数据加载到html选项时出现问题。这是场景：

有动态创建按钮的按钮
当用户点击该按钮，然后显示表格
当显示的表单有动态选择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

如果您通过 html （例如＆＃34; 12 ..＆＃34;）从服务器获得<select>选项，则（使用jquery）：

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

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

...
<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();
  });
});

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

5 个答案: