Javascript 从下拉选项填充表单输入，解析json数据属性

MySQL查询后会填充一个选择下拉菜单，生成类似

<form method="post" action="action.php">
   <select name="elements" id="elements">
      <option type="text" value="">Select an element to be modified, or fill data below for a new one</option>
      <option type="text" value="1" data-json='{"elements_id":"1","elements_field1":"Lorem ipsum","elements_field2":"Foo"}'>Element 1</option>
      <option type="text" value="2" data-json='{"elements_id":"2","elements_field1":"Lorem ipsum again","elements_field2":"Foo again"}'>Element 2</option>
   </select>
   <input type="text" id="elements_id">
   <input type="text" id="elements_field1">
   <input type="text" id="elements_field2">
   <input type="submit" value="Submit">
</form>

选择要修改的图元，或填写以下数据以获得新图元
要素1
要素2

我希望各种输入字段根据上面的下拉列表中的选择动态填充

根据以下建议，我尝试在php文件的

部分包含以下脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $('#elements').on('change', function() {
       var selected = $(this).find('option[value="' + $(this).val() + '"]').data('json');
       $('#elements_id').val(selected.elements_id);
       $('#elements_field1').val(selected.elements_field1);
       $('#elements_field2').val(selected.elements_field2);
   });
</script>

$（'#elements'）。在（'change'，function（）上{
所选变量=$（this.find（'option[value=“”+$（this.val（）+“]））.data（'json'）；
$（'#elements_id'）.val（selected.elements_id）；
$（'#elements_field1'）.val（selected.elements_field1）；
$（'#elements_field2'）.val（selected.elements_field2）；
});

但这不起作用，甚至不会导致我可以通过浏览器的Web控制台跟踪的错误。我认为这与作为MySQL查询输出的json格式有关（未显示，但验证为常规json），或者与脚本的json解析有关

---

有什么提示或建议吗？非常感谢

您的代码似乎适合我。唯一的错误是设置第二个输入的值两次。修正那个

$（'#elements'）。在（'change'，function（）上{
所选变量=$（this.find（'option[value=“”+$（this.val（）+“]））.data（'json'）；
console.log（选中）；
$（'#elements_id'）.val（selected.elements_id）；
$（'#elements_field1'）.val（selected.elements_field1）；
$（“#elements_field2'）.val（selected.elements_field2）；//感谢您指出：这是一个错误，是为了简化我的原始代码（稍微复杂一些）。但是，即使更正了这个错误，并将我自己的示例复制和粘贴到单独的php文件中，它也不起作用：（这取决于一些配置选项吗？我已经将javascript移到了
前面的位置，如下所述（），现在它可以正常工作了，非常感谢！
$('#elements').on('change', function() {
  var selected = $(this).find('option[value="' + $(this).val() + '"]').data('json');
  console.log( selected );
  $('#elements_id').val(selected.elements_id);
  $('#elements_field1').val(selected.elements_field1);
  $('#elements_field2').val(selected.elements_field2); // <-- Here was your error
});