Javascript Knockoutjs多选列表不呈现html

假设列表中分别有五个元素

item1
  item2
   item3
  item4
item5

如何使选择框呈现html并在需要时显示空白

选择框本身如下所示

<select id="formSectors" multiple size="5" class="form-control" data-bind="options: sectors, optionsText: 'Name', selectedOptions: newForm().Sectors"></select>

我尝试过一个家伙建议使用

data bind=“foreach:sections”

和

的方法，但这导致

newForm（）.sections

具有文本值，而不是对象，即使值呈现正确

我用谷歌搜索了一下，似乎没有合适的方法让html呈现空白。（即使当我登录控制台时，它在前面清楚地显示空白，但在多选列表中不会显示出来

有没有人想到一个好的解决办法

最后一种方法可能是编写自己的选项绑定，该绑定使用数据绑定html呈现html部分

---

EDIT1//如果我在chrome上右键单击并选择edit as html，它实际上会将

&

呈现为

&；

，这会导致不正确的html，这就是它不呈现的原因。

经过数小时的测试后，我发现用

\t

替换

确实会在前面添加空格字符串的t，但“多重选择”框不会渲染这些

我所做的是，您必须创建一个自定义optionsText函数来替换knockoutjs的默认可视化工具

我这样做了：

<select id="formSectors"
        multiple
        size="5"
        class="form-control"
        data-bind="options: sectors,
        optionsText: function(item){return item.Name.split('\t').join('&nbsp;&nbsp;&nbsp;&nbsp;')},
        selectedOptions: newForm().Sectors">
</select>



它几乎在
\t
处拆分字符串，并用适当的html替换它们，从而生成一个漂亮的列表

经过数小时的测试，我发现用
\t
替换
确实会在字符串前面添加空格，但多选框不会显示这些空格

我所做的是，您必须创建一个自定义optionsText函数来替换knockoutjs的默认可视化工具

我这样做了：

<select id="formSectors"
        multiple
        size="5"
        class="form-control"
        data-bind="options: sectors,
        optionsText: function(item){return item.Name.split('\t').join('&nbsp;&nbsp;&nbsp;&nbsp;')},
        selectedOptions: newForm().Sectors">
</select>



它几乎在
\t
处拆分字符串，并用适当的html替换它们，从而生成一个漂亮的列表