jQuery的追加不

-1

工作，我有一些JSON，我試圖用它來生成一個選擇框jQuery的追加不

的JSON中有一些元素使用 提供一定的間距，例如。

[ 
    {"value":1, "text":"1"} 
    {"value":2, "text":"&nbsp;1. a."} 
    {"value":3, "text":"&nbsp;&nbsp;1. a. i."} 
]

然後從我的jQuery，我得到這些值，並使用.append（）替換選項。

$.each(response, function(id, ob) { 
    // Add json results 
    options.append($('<option>', { 
    value: ob.value, 
    text: ob.text 
    })); 

    // Apply 
    $('#select_list').html(options.html()); 
});

然而，當它在HTML顯示出來，它顯示了 而不是呈現的實際空間。

我可以修改jQuery或json數據，無論哪個人允許我在需要時添加空格，但我不知道如何。

來源

2017-08-08 Bobby S

您插入使用文本方式的HTML。文本形式的' '呈現爲' '。但請注意，通過使用.html，它將插入返回的內容。只有在您信任從中獲取該數據的服務器時，才能執行此操作，或者正確清理該數據。 –

你想插入HTML，而不是文本：

$('select').append($('<option>', { 
 
    value: "foo", 
 
    text: "&nbsp;&nbsp;&nbsp;text" // literal text 
 
    })); 
 

 

 
    $('select').append($('<option>', { 
 
    value: "bar", 
 
    html: "&nbsp;&nbsp;&nbsp;html" // parsed html. (Sanitize it!) 
 
    }));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
</select>

來源

2017-08-08 19:05:54

完美的謝謝。愚蠢的錯誤。 –

完全沒有，我比那個時候更容易被那個人抓到 –

試試這個

{"value":3, "text":encodeURIComponent("&nbsp;&nbsp;1. a. i.")}

來源

2017-08-08 19:13:10

除了 是一個HTML表示 - 所以你需要一個.html()代替的.text()（如已經提到的），這裏有一些其他的方式來實現追加

var response = [ 
 
    {"value":1, "text":"1"}, 
 
    {"value":2, "text":"&nbsp;1. a."}, 
 
    {"value":3, "text":"&nbsp;&nbsp;1. a. i."} 
 
]; 
 

 
$.each(response, function(id, ob) { 
 
    $('<option/>', { 
 
    value: ob.value, 
 
    html: ob.text, 
 
    appendTo: '#select_list' 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select_list"></select>

var response = [ 
 
    {"value":1, "text":"1"}, 
 
    {"value":2, "text":"&nbsp;1. a."}, 
 
    {"value":3, "text":"&nbsp;&nbsp;1. a. i."} 
 
]; 
 

 

 
$("#select_list").append(
 
    response.map(function(o) { 
 
    return `<option value='${o.value}'>${o.text}</option>`; 
 
    }) 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select_list"></select>

來源

2017-08-08 19:28:17

jQuery的追加不

回答

相關問題