使用Ajax生成选择框

Question

My AJAX works fine but when I want to populate Select box, I get nothing displayed:

My HTML:

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

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

My 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));

When I change $test= 'something'; it works and I get the word 'something' displayed.

When I log , console.log(data.items); and I get :

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

But when I delete the options of select (id="hotspotList" class="selectpicker" data-actions-box="true" data-live-search="true" ), it works, seems like the problem in the cotes, but I need them

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

My php :

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

hope it will help..