Question

我对JS很新，并创建了一小块脚本，它完全按照我想要的方式找到了一些元素，然后添加了通过ajax填充数据的元素.... 所以我离开了......

<select><select/>

到此......

<select>
  <option value="{ajax value data}"> {ajax text data} <option/>
  ...
<select/>

使用这段脚本......

filteredSelectIds.forEach(function (item) {
    let itemId = '#' + item;
    let itemData = item.split('-')[0] + 's';
    $.each(data[itemData], function (i, color) {
      $(itemId).append($('<option/>', {
        value: color.optionValue,
        text : color.optionText
      }));
    });
  });

现在，我想要做的是同时为每个元素添加一个Font Awesome图标，所以我需要最终得到像这样的东西,,,,

<select>
  <option value="{ajax value data}"><i class="fa fa-icon"> {ajax text data} <i/><option/>
  ...
<select/>

我该怎么做？

Answer 1

我也是JS的新手，试试这个。

element = '<i class="fa fa-icon"> {0} <i/>'.format("{ajax text data}")
$('<option/>').append( element  );

Answer 2

所以@brk给了我这个有效的解决方案，并且可以将Element放在另一个

中

＆＃34;创建选项标签＆amp;我标记＆amp;首先将itag附加到选项标签，然后将选项标签附加到项目＆＃34;

filteredSelectIds.forEach(function (item) {
        let itemId = '#' + item;
        let itemData = item.split('-')[0] + 's';
             $.each(data[itemData], function (i, color) {
var selOption = $('<option value="' + color.optionValue + '"></option>');
               selOption.append('<i class="fa fa-icon">'+color.optionText+'<i/>');
               $(itemId).append(selOption); }); });

然而，虽然这会将元素放置在我想要的元素内部，并且这可能原则可能用于将任何元素放置在另一个元素中，但Tibrogargan正确地指出了一个问题，该元素不能将元素放置在元素中（不是我的问题的重点，但有帮助）。我的解决方案是使用unicode for Font Awesome图标并使用\ u然后使用\ xa0将其用于其他空格，如下所示： -

filteredSelectIds.forEach(function (item) {
let itemId = '#' + item;
let itemData = item.split('-')[0] + 's';
$.each(data[itemData], function (i, color) {
  $(itemId).append($('<option/>', {
    value: color.optionValue,
    text : '\ue905  \xa0\xa0\xa0' +color.optionText
  }));
});

}）;

谢谢！

使用JavaScript或jQuery

2 个答案: