Javascript 无法从下拉列表中为带有HTML的Jquery Select2提供动态值

我正在为我的客户开发一个名为Gari.PK的汽车项目。他想让我改变下拉列表，我被一个问题困住了。下面是我的HTML代码的一个下拉列表

<select class="round-10 js-example-basic-single" name="c_version" id="c_version">
  <option value="">- Any Version -</option>
  <option value="XLi VVTi">XLi VVTi  <br><span style="color: red;">2016 . Petrol . Manual</span></option>
  <option value="GLi 1.3 VVTi">GLi 1.3 VVTi  <br><span style="color: red;">2016 . Petrol . Manual</span></option>
  <option value="GLi Automatic 1.3 VVTi">GLi Automatic 1.3 VVTi  <br><span style="color: red;">2016 . Petrol . Automatic</span></option>
  <option value="Altis Automatic 1.6">Altis Automatic 1.6  <br><span style="color: red;">2016 . Petrol . Automatic</span></option>
  <option value="Altis 1.8">Altis 1.8  <br><span style="color: red;">2016 . Petrol . Manual</span></option>
  <option value="Altis CVT i 1.8">Altis CVT i 1.8  <br><span style="color: red;">2016 . Petrol . Automatic</span></option>
  <option value="Altis Grande 1.8">Altis Grande 1.8  <br><span style="color: red;">2016 . Petrol . Manual</span></option>
  <option value="Altis Grande CVT i 1.8">Altis Grande CVT i 1.8  <br><span style="color: red;">2016 . Petrol . Automatic</span></option>
  <option value="">Other</option>
</select>

-任何版本-
XLi VVTi
2016年。汽油。手册
GLi 1.3 VVTi
2016年。汽油。手册
GLi自动1.3 VVTi
2016。汽油。自动的
Altis Automatic 1.6
2016。汽油。自动的
海拔1.8
2016年。汽油。手册
Altis CVT i 1.8
2016年。汽油。自动的
阿尔蒂斯格兰德1.8
2016年。汽油。手册
Altis Grande CVT i 1.8
2016年。汽油。自动的
其他

前面看起来像这样

或在网站上查看

我想把我的下拉列表改成一个更吸引人的方式，因为我正在图片底部显示它

但我没有这样做。我试图使用jQuery select2，但问题是select2没有从“option”标记中选取HTML。我看到一些帖子说，您可以在下面动态地将数据提供给Select2 us：

var data = [
      { id: 0, text: '<div style="color:green">enhancement</div>' },
      { id: 1, text: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>' }];

  $(".js-example-basic-single").select2({
      data: data,
      templateResult: function (d) { return $(d.text); },
      templateSelection: function (d) { return $(d.text); },

  });

var数据=[
{id:0，文本：“增强”}，
{id:1，text:'这是新行上的一些小文本'}]；
$（“.js示例基本单曲”）。选择2({
数据：数据，
templateResult:function（d）{return$（d.text）；}，
templateSelection:函数（d）{return$（d.text）；}，
});

---

现在，我如何将“option”标记中的数据传递给上述代码

您可以使用

select2

的

templateResult

并在返回parsedHtml的位置编写自定义

templateResult

。您还需要使用

escapeMarkup

选项。考虑下面的例子和工作片段：

var数据=[{
id:“XLi VVTi”，
文本：“XLi VVTi
2016.汽油机.手册”
}, {
id:“GLi 1.3 VVTi”，
正文：“GLi 1.3 VVTi
2016.汽油机.手册”
}, {
id:“GLi自动1.3 VVTi”，
文本：“GLi自动1.3 VVTi
2016.汽油机.自动”
}, {
id:“高度自动1.6”，
文字：“Altis自动1.6
2016.汽油机.自动”
}, {
id:“高度1.8”，
文字：“Altis 1.8
2016.汽油机.手册”
}, {
id:“高度CVT i 1.8”，
文字：“Altis CVT i 1.8
2016。汽油机。自动”
}, {
id:“Altis Grande 1.8”，
文字：“Altis Grande 1.8
2016.汽油机手册”
}, {
id:“Altis Grande CVT i 1.8”，
文字：“Altis Grande CVT i 1.8
2016.汽油机.自动”
}, {
id:“”，
文字：“其他人”
}];
$（“.js示例基本单曲”）。选择2({
数据：数据，
逃逸标记：功能（m）{
返回m；
},
templateResult:函数（d）{
return$.parseHTML（d.text）；//返回已解析的html，因为文本本身包含html元素
//您还可以将此代码移动到单独的函数中，并为templateResult提供函数名
}
});

您可以使用选择的插件，并且必须创建
。链接：再解释一下文本框是用来做什么的？过滤？这是一个带有Jquery Select2的下拉列表，请告诉我如何从选择中动态地将“选项”数据放入var数据：[{text:'enhancement'}]中从
html
中删除它，并将其保存在
js
文件中的
data
变量中如何？你能给我举个例子吗？但我能用Jquery或Javascript给出这些值吗。这就是你在上面例子中看到的。。这些选项是从DB加载的吗？