사용자 지정 데이터 속성을 내 선택 구성 요소에 전달하려고합니다. 다음은 선택하려는 정적 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:$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 : JSON 위치 0의 예기치 않은 토큰 #
데이터 속성에서 #을 제거해도 작동하지 않습니다. selectize가이 HTML에 대한 데이터 JSON을 생성 할 수없는 이유는 무엇입니까? 대신 어떻게 해결합니까?
이 jsfiddle입니다 - https://jsfiddle.net/gutzmnsw/
다음 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="{"hex":"#FFFFFF"}" data-reactid=".0.1.0.2.0.0.1.0.1:$2">White</option>
<option value="1" data-data="{"hex":"#FF0000"}" data-reactid=".0.1.0.2.0.0.1.0.1:$1">Red</option>
<option value="3" data-data="{"hex":"#C0C0C0"}" data-reactid=".0.1.0.2.0.0.1.0.1:$3">Silver</option>
<option value="4" data-data="{"hex":"#808080"}" data-reactid=".0.1.0.2.0.0.1.0.1:$4">Gray</option>
<option value="5" data-data="{"hex":"#800000"}" 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>
이 방법으로 내 구성 요소를 선택했습니다.
$('#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
},
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다