如何编写一个JQuery函数来填充html选择的div?

时间:2014-04-08 19:32:26

标签: php jquery html

以下是我简单的Javascript功能。

<html>
  <head>
    <script>
      $(document).ready(function() {
        $.get('getImage.php', function(data) {
          $('#imageSelector').html("<select>" + data + "</select>");
        });
      });
    </script>
  </head>
  <body>
    <div id="imageSelector">
    </div>

    <div id="imageArea">
    </div>
  </body>
</html>

这是用于获取数据的PHP脚本。

<?php
  include 'connect.php';

  $sql = "SELECT products_id, products_image FROM products";
  $query = mysqli_query($dbc, $sql);
  while ($Array = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
    $imageEcho .= '<option value=' . $Array['products_id'] . '>' . $Array['products_image'] . '</option>';
  }
  echo $imageEcho;
?>

以下是用于完成图像的URL路径的函数。

 function getImage(image) {
    document.getElementById("imageArea").innerHTML="<img    src=../eoas/images/"+image+" alt='' />";
}

也许我不能这样做,但我想我会检查是否有人知道。

2 个答案:

答案 0 :(得分:1)

你需要像这样的人:

$(document).ready( function(){ 
       $.get("getImage.php", 
            function(data){ 
                  $( '#imageSelector' ).attr('src', data); 
       }); 
 });

使用Chrome开发者工具了解ajax答案中的数据

以下是article

使用JSON答案会好得多

答案 1 :(得分:1)

Example使用jsFiddle API。

$.get('getImage.php',function(data){
    // data = '<option value=...>...</option><option ...>...</option>...';
    $('<select>').html(data).appendTo('#imageSelector');
});