使用 Ajax 生成一个选择框答案

【问题标题】：Using Ajax To generate A Select Box使用 Ajax 生成一个选择框
【发布时间】：2016-04-29 08:44:11
【问题描述】：

我的 AJAX 工作正常，但是当我想填充选择框时，我什么也没显示：

我的 HTML：

<div id="sim-div"></div>

我的 JS：

$(document).on('change', '#hotspotList', function(){
    var selectedHotspots = $('#hotspotList').val();
    $.ajax({ 
        url: "simList.php",
        type: "POST",
        dataType:"json", //expect json value from server
        data: selectedHotspots
    }).done(function(data){ //on Ajax success
        $("#sim-div").html(data.items);
    })
    e.preventDefault();
});

我的 PHP：

$test = '
<select  id="hotspotList" class="selectpicker"   data-actions-box="true" data-live-search="true" multiple>
<option>test</option>
</select>
';
echo json_encode(array('items'=>$test));

当我更改 $test= 'something'; 时，它会起作用，并且会显示“某物”这个词。

当我登录时，console.log(data.items); 我得到：

<select id="hotspotList" class="selectpicker" data-actions-box="true" data-live-search="true" multiple> <option>test</option> 
</select>

但是当我删除 select (id="hotspotList" class="selectpicker" data-actions-box="true" data-live-search="true" ) 的选项时，它可以工作，似乎问题在小窝，但我需要它们

【问题讨论】：

.html(data["items"]) 呢？还是 json_decode(data) ？
在收到“数据”时尝试记录它的内容。然后就很容易找到使用方法了……
@Random, I console.log(data.items);我得到：跨度>

标签： javascript php ajax

【解决方案1】：

$(document).on('change', '#hotspotList', function(){
    var selectedHotspots = $('#hotspotList').val();
    $.ajax({ 
        url: "simList.php",
        type: "POST",           
        data: selectedHotspots,
        success:function(data){
              $("#sim-div").html($.parseHTML(data));
        }
    });
});

我的 php ：

echo $test = '<select  id="hotspotList" class="selectpicker"   data-actions-box="true" data-live-search="true" multiple>
<option>test</option>
</select>
';

希望它会有所帮助..

【讨论】：

$("#sim-div").html($.parseHTML(data));你得到一个字符串，现在你需要转换为 html 元素
然后使用 $("#sim-div").html($.parseHTML(data.items));与数据类型：“json”，

【解决方案2】：

<div id="sim-div">
<select id="hotspotList" class="selectpicker" data-actions-box="true" data-live-search="true" multiple> <option>test</option> <option>test4</option> 
</select>

</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>

<script>
$(document).on('change', '#hotspotList', function(){
    var selectedHotspots = $('#hotspotList').val();
    $.ajax({ 
        url: "simList.php",
        type: "POST",
        dataType:"json", //expect json value from server
        data: selectedHotspots
    }).done(function(data){ //on Ajax success
        $("#sim-div").html(data.items);
    })
});


</script>

在 simList.php 中

$test = '
<select  id="hotspotList" class="selectpicker"   data-actions-box="true" data-live-search="true" multiple>
<option>test</option>
<option>teste</option>
</select>
';
echo json_encode(array('items'=>$test));
?>

现在我测试并且工作正常

【讨论】：

这里删除了 e.preventDefault(), $.parseHTML
不起作用，当我删除 (id="hotspotList" class="selectpicker" data-actions-box="true" data-live-search="true") 时它起作用了跨度>
我们可以将
能否请您按原样粘贴并运行，100% 可以工作

【解决方案3】：

试试这个

<!DOCTYPE html>
<html>
<body>
<select id="hotspotList" name="hotspotList" class="selectpicker" data-actions-box="true" data-live-search="true" multiple>
    <option>test</option>
    <option>test1</option>
    <option>test2</option> 
</select>
<div id="sim-div">        
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).on('change', '#hotspotList', function(){

    if( $('#hotspotList :selected').length > 0){
        //build an array of selected values
        var hotspotList = [];
        $('#hotspotList :selected').each(function(i, selected) {
            hotspotList[i] = $(selected).val();
        });

        $.ajax({ 
            url: "simList.php",
            type: "POST",           
            data: {'hotspotList':hotspotList},
            success:function(data){
                  $("#sim-div").html(data);
            }
        });        
    }   

});
</script>
</body>
</html>

simList.php

<?php
$output = "Selected values are ".implode(',',$_POST['hotspotList']);
echo $output;
?>

【讨论】：