Selectize Uncaught SyntaxError: Неожиданный токен # в JSON в позиции 0

Question

Я пытаюсь передать атрибуты пользовательских данных моему элементу selectize. Ниже статический HTML генерируется, который я хотел бы selectize:

<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:$2">White</option> 
    <option value="1" data-data="#FF0000" data-reactid=".0.1.0.2.0.0.1.0.1:$1">Red</option> 
    <option value="3" data-data="#C0C0C0" data-reactid=".0.1.0.2.0.0.1.0.1:$3">Silver</option> 
    <option value="4" data-data="#808080" data-reactid=".0.1.0.2.0.0.1.0.1:$4">Gray</option> 
    <option value="5" data-data="#800000" data-reactid=".0.1.0.2.0.0.1.0.1:$5">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

Даже если Я удаляю # из атрибута data, он не работает. Почему selectize не способен генерировать данные JSON для этого html? Как мне работать?

Это 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:$2">White</option> 
    <option value="1" data-data="{&quot;hex&quot;:&quot;#FF0000&quot;}" data-reactid=".0.1.0.2.0.0.1.0.1:$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:$3">Silver</option> 
    <option value="4" data-data="{&quot;hex&quot;:&quot;#808080&quot;}" data-reactid=".0.1.0.2.0.0.1.0.1:$4">Gray</option> 
    <option value="5" data-data="{&quot;hex&quot;:&quot;#800000&quot;}" data-reactid=".0.1.0.2.0.0.1.0.1:$5">Maroon</option> 
    <option value="0" data-reactid=".0.1.0.2.0.0.1.0.$showAll">All colours</option> 
</select> 

не Selectized мой компонент так:

$('#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 
    },