HTML &PHP:
<select id="package">
<?php $package_size_array = array('size_a' => 70, 'size_b' => 90, 'size_c' => 130); ?>
<option value="size" id="<?php echo json_encode($package_size_array, JSON_PRETTY_PRINT); ?>">Size</option>
<!--Some more <option>s here...-->
</select>
JavaScript: $(document).ready(function() {
$('select#package').change(function() {
var id = $(this).children(':selected').attr('id');
alert(JSON.parse(id)); /* Line 217. in functions.js file */
});
});
问题:Chrome和可能其他浏览器的控制台打印:
Uncaught SyntaxError: Unexpected end of input functions.js:217
(anonymous function) functions.js:217
jQuery.event.dispatch jquery.js:4371
elemData.handle
除非您要转换为JSON的数据仅由布尔值或数字组成,否则生成的JSON将包含"
字符。
您使用"
字符来分隔ID属性值,因此数据中的第一个字符将过早地结束属性。
如果您检查发送到浏览器的数据(使用view > source
)而不是仅仅查看PHP,这将更加明显。
您需要将JSON的文本表示转换为它的HTML表示。
id="<?php echo htmlspecialchars(json_encode($package_size_array)); ?>"
您还应该删除JSON_PRETTY_PRINT,它在调试时很有用,但在实践中效率很低,并且新行不适合属性值。
也就是说,使用JSON作为ID值是一个糟糕的主意。如果您想在元素上存储任意数据,请使用data-*
属性(不过您仍然需要将文本转换为HTML !)