Selectize Uncaught SyntaxError: Unexpected token # in JSON at position 0

Question

我正在尝试将自定义数据属性传递到我的选择组件。下面是生成的静态 HTML，我希望选择：

<select id="colour-filter" data-reactid=".0.1.0.2.0.0.1.0">
   <option value="" data-data="false" data-reactid=".0.1.0.2.0.0.1.0.$blank"></option>
   <option value="2" data-data="#FFFFFF" data-reactid=".0.1.0.2.0.0.1.0.1:">White</option>
   <option value="1" data-data="#FF0000" data-reactid=".0.1.0.2.0.0.1.0.1:">Red</option>
   <option value="3" data-data="#C0C0C0" data-reactid=".0.1.0.2.0.0.1.0.1:">Silver</option>
   <option value="4" data-data="#808080" data-reactid=".0.1.0.2.0.0.1.0.1:">Gray</option>
   <option value="5" data-data="#800000" data-reactid=".0.1.0.2.0.0.1.0.1:">Maroon</option>
   <option value="0" data-data="false" data-reactid=".0.1.0.2.0.0.1.0.$showAll">All colours</option>
</select>

但是，当这段代码 (JSON.parse("#FFFFFF")) 在 selectize 中执行时，我收到以下错误：

VM11923:1 Uncaught SyntaxError: Unexpected token # in JSON at position 0

即使我从数据属性中删除#，它也不起作用。为什么 selectize 无法为此 html 生成数据 JSON？我该如何解决？

这是 jsfiddle - https://jsfiddle.net/gutzmnsw/

Answer 1

它与以下 HTML 配合使用效果很好，但我想知道为什么我必须发送 JSON 并且仅发送数据数据的属性值将不起作用，并且有文档中没有提到这个：

<select id="colour-filter" data-reactid=".0.1.0.2.0.0.1.0">
   <option value="" data-reactid=".0.1.0.2.0.0.1.0.$blank"></option>
   <option value="2" data-data="{&quot;hex&quot;:&quot;#FFFFFF&quot;}" data-reactid=".0.1.0.2.0.0.1.0.1:">White</option>
   <option value="1" data-data="{&quot;hex&quot;:&quot;#FF0000&quot;}" data-reactid=".0.1.0.2.0.0.1.0.1:">Red</option>
   <option value="3" data-data="{&quot;hex&quot;:&quot;#C0C0C0&quot;}" data-reactid=".0.1.0.2.0.0.1.0.1:">Silver</option>
   <option value="4" data-data="{&quot;hex&quot;:&quot;#808080&quot;}" data-reactid=".0.1.0.2.0.0.1.0.1:">Gray</option>
   <option value="5" data-data="{&quot;hex&quot;:&quot;#800000&quot;}" data-reactid=".0.1.0.2.0.0.1.0.1:">Maroon</option>
   <option value="0" data-reactid=".0.1.0.2.0.0.1.0.$showAll">All colours</option>
</select>

这样选择了我的组件：

$('#colour-filter').selectize({
  plugins: ['restore_on_backspace'],
  persist: false,
  allowEmptyOption: true,
  selectOnTab: true,
  render: {
    option: (item, escape)->
      if item.hex && item.hex == "#FFFFFF"
        option_html = '<div>' + '<div style="background-color: ' + item.hex + ';border: 1px solid black"></div><span>' +
          escape(item.text) + '</span>' + '</div>';
      else if item.hex
        option_html = '<div>' + '<div style="background-color: ' + item.hex + '"></div><span>' +
            escape(item.text) + '</span>' + '</div>';
      else
        option_html = '<div>' + escape(item.text) + '</div>';
      return option_html
  },

Selectize Uncaught SyntaxError: Unexpected token # in JSON at position 0

Selectize Uncaught SyntaxError: Unexpected token # in JSON at position 0

ruby-on-rails-4

selectize.js