使用Ajax生成選擇框

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'; 它可以正常工作，並且顯示“ something”一詞。

當我登錄時， console.log(data.items); 我得到：

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

但是，當我刪除選擇（id =“ hotspotList” class =“ selectpicker” data-actions-box =“ true” data-live-search =“ true”）的選項時，它似乎起作用了，就像棚子里的問題一樣，但我需要他們

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 個解決方案

解決方案1
0 2016-04-29 09:01:50

解決方案2
0 2016-04-29 09:58:04

解決方案3
0 2016-04-29 10:19:31

使用Ajax生成選擇框

問題描述

3 個解決方案

解決方案1 0 2016-04-29 09:01:50

解決方案2 0 2016-04-29 09:58:04

解決方案3 0 2016-04-29 10:19:31

解決方案1
0 2016-04-29 09:01:50

解決方案2
0 2016-04-29 09:58:04

解決方案3
0 2016-04-29 10:19:31