как передать переменную php в jquery

Я пытаюсь передать переменную php в jquery, я пытаюсь использовать

Но это не работает, когда я пытаюсь использовать

dataSource: insted

dataSource: [ { childName: "Child1", childId: 1, parentId: 1 }, { childName: "Child2", childId: 2, parentId: 2 }, { childName: "Child3", childId: 3, parentId: 1 }, { childName: "Child4", childId: 4, parentId: 2 } ] 

он не может отобразить второй выбор, но я нахожу, что данные $ совпадают с исходными данными

мой код,

 <head> <meta charset="utf-8"/> <title>Kendo UI Snippet</title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css"/> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css"/> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css"/> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css"/> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"> </script> </head> <body> <input id="parent" /> <input id="child" /> <?php $data = '[ { childName: "Child1", childId: 1, parentId: 1 }, { childName: "Child2", childId: 2, parentId: 2 }, { childName: "Child3", childId: 3, parentId: 1 }, { childName: "Child4", childId: 4, parentId: 2 } ]'; ?> <script> $("#parent").kendoDropDownList({ dataTextField: "parentName", dataValueField: "parentId", dataSource: [ { parentName: "Parent1", parentId: 1 }, { parentName: "Parent2", parentId: 2 } ] }); $("#child").kendoDropDownList({ cascadeFrom: "parent", dataTextField: "childName", dataValueField: "childId", dataSource: <?php json_encode($data); ?> }); </script> </body> </html> 

я не знаю, в чем проблема с моим кодом, пожалуйста, помогите мне решить проблему, anyhelp будет оценен! благодаря!