Question

我有一些json，我试图用来生成一个选择框

json中有一些元素使用var FeaturedThumbnailModel = Backbone.Model.extend({ defaults:{ thumb_lists : '.thumbnail-lists', descriptionClass :'.product-description-container', } }); var FeaturedThumbnailView = Backbone.View.extend({ initialize: function(){ this.model = new FeaturedThumbnailModel(); }, events : { 'click' :'onDescription' }, onDescription: function(e){ e.preventDefault(); var Element = this.$el; var templT = $(this.model.get('descriptionClass')); console.log(Element); var html = Element.parent().find(templT).html(); console.log(html) var descriptionTemplate = _.template(html); alert(html); return this; } }); var FeaturedThumList = Backbone.View.extend({ render:function( thumbnailContainer ){ var targets = $('.thumbnail-lists > .big-thumbnail-container'); _.each( targets, function( thumbnailContainer ){ new FeaturedThumbnailView({ el: thumbnailContainer}); }, this); } }); $(document).ready(function(){ var featuredThumblist = new FeaturedThumList(); featuredThumblist.render('.thumbnail-lists'); });来提供一些间距，例如。

&nbsp;

然后从我的jQuery中，我获取这些值并使用.append（）替换选项。

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

但是，当它显示在HTML中时，它会显示$.each(response, function(id, ob) { // Add json results options.append($('<option>', { value: ob.value, text: ob.text })); // Apply $('#select_list').html(options.html()); });，而不是呈现实际空间。

我可以修改jQuery或json数据，无论哪个允许我在需要的地方添加空格，但我不确定如何。

Answer 1

您想要插入html，而不是文字：

＆＃13;

  $('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!)
  }));

＆＃13;

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

＆＃13;

Answer 2

试试这个

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

Answer 3

除了 是HTML代表之外 - 因此您需要.html()代替.text()（如前所述），以下是实现追加的其他方式

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery追加不使用

3 个答案: