从JQuery动态选择并填充输入值

Question

我有一个这样的jQuery代码：

let $options = JSON.parse(data.options);
let $keys = Object.keys($options);
$keys.forEach(function (item,index, array) {
  $('#' + item ).val($options[item] );
});

我想用$ options中的数据填充$ keys中id中的所有输入值。但这不起作用。但是，如果我像这样手动操作，它将起作用：

      $("#title").val($options.title);
      $("#type").val($options.type);
      $("#location").val($options.location);

我确定问题出在以下代码中：$('#' + item )我尝试了很多事情，但似乎不起作用。所以有什么办法可以解决这个问题？

Answer 1

只需使用表单字段的name属性在jQuery中访问它们。假设每个选项的键名都与表单字段名相同。

通过使用方括号[]，然后是属性名称和可选的属性值，您可以使用特定值来定位特定元素。要了解更多信息，请选择：https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

+function() {
  let data = {
     options : '{"title":"lord", "type":"male", "location":"Nilfgard"}'   
  };
  let $options = JSON.parse(data.options);
  let $keys = Object.keys($options);
  $keys.forEach(function (item,index, array) {
    $('form [name="' + item +'"]').val($options[item] );
  })
}();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>title</label><input name="title"><BR/>
<label>type</label><input name="type"><BR/>
<label>location</label><input name="location">
</form>