Question

我有一个json对象，由jquery ajax＆amp;像这样填充我的选择：

function populateSelect(url, selectId) {

    var sel = $(selectId);
    $.ajax({
        url: url,
        dataType: 'json',
        success: function (data) {
            sel.empty();
            sel.append('<option value="" selected></option>');
            for (var i = 0; i < data.length; i++) {
                sel.append('<option value="' + [i] + '">' + data[i].BusinessName + '</option>');
            }
        }
    });

};

populateSelect('/api/buninesses', '#business');

返回的示例json：

[{"BusinessID":123,"BusinessName":"Test1","ContactName":"John Doe"},
{"BusinessID":456,"BusinessName":"Test2","ContactName":"Sally Smith"}]

示例选择它创建：

<select id="business">
    <option value=""></select>
    <option value="0">Test1</select>
    <option value="1">Test2</select>
</select>

当某些更改选择时，如何使用json对象中的数据填充一组输入？

例如，如果有人选择“Test1”，那么我想用json对象中的正确数据填充输入以供选择：

<input id ="BusinessID" value="123">
<input id ="BusinessName" value="Test1">
<input id ="ContactName" value="John Doe">

如果他们选择“Test2”，则输入应如下所示：

<input id ="BusinessID" value="456">
<input id ="BusinessName" value="Test2">
<input id ="ContactName" value="Sally Smith">

Answer 1

将对象作为json分配给select选项的数据属性

sel.append('<option value="' + [i] + 
  '" data="' + escape(JSON.stringify(data[i])) + '">' + 
  data[i].BusinessName + '</option>');

然后，当选择一个值时，从所选选项的data属性解析json并将其分配给输入字段。

$("#business").change(function() {
   var obj = JSON.parse(unescape($("#business option:selected").attr('data')));
   $("#BusinessId").val(obj.BusinessID);
   $("#BusinessName").val(obj.BusinessName);
   $("#ContactName").val(obj.ContactName);
});

检查JSFiddle是否有工作示例。

如何使用json对象中的数据填充一组输入

1 个答案: