Question

我的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”）时，它的工作原理，似乎是问题所在cotes，但我需要它们

Answer 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>
';

希望它会有所帮助..

Answer 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));
?>

现在我测试并且工作正常

Answer 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;
?>

使用Ajax生成选择框

3 个答案: