AJAX函数从下拉列表中进行实时预览

时间:2017-05-06 16:52:46

标签: javascript php jquery ajax

我在通过AJAX配置实时数据预览方面遇到了一些麻烦。我设法使用以下代码进行预览,但我对如何继续进行了一些操作。我的下一步是显示从同一个表格提供的图像网址。因为我是PHP和AJAX的新手(特别是)我没有进一步使用这段代码。这就是HTML的样子:

PHP逻辑:

$query = $conn->prepare("SELECT * FROM items WHERE user_id = $userID");
$query->execute();

HTML表单:

<div class="form-group">
<div id="results"></div>

<form action="" method="post">
  <label for="sel1">Selecteer uw items:</label>

  <select class="form-control" id="sel1"multiple>

    <?php
        while ($q = $query->fetch()){
          echo '<option value="' . $q['id'] . '">' . $q['Beschrijving'] 
          . '</option>';
        }
    ?>

  </select>

  <button type="button" class="btn btn-success" name="submit">Toevoegen 
   aan board</button>
 </form>

 </div>

Ajax / JS脚本:

<script type="text/javascript">
$("#sel1").on("change", function(){
function clearpost(){
  $("#results").val("");
}

var selected = $(this).val();
makeAjaxRequest(selected);
function makeAjaxRequest(opts){
  $.ajax({
    type:"POST",
    data:{opts: opts},
    url:"views/itemOverview.php",
    success:function(res){
      $("#results").html("<p>Uw items : " + res + "</p>");
    }
  })
}

})
</script>

PHP文件:

echo '<pre>';
print_r($_POST);
echo '</pre>';

结果如下:

Multiple Selections from list

非常感谢所有反馈! 亲切的问候

0 个答案:

没有答案