使用 JSON 数据填充 INPUT 和 SELECT

Posted 2023-05-09

【中文标题】使用 JSON 数据填充 INPUT 和 SELECT

【英文标题】：Populate INPUT & SELECT with JSON data

【发布时间】：2018-10-14 06:10:57

【问题描述】：

您好，我不仅尝试从 JSON 响应中填充输入字段，还尝试填充选择框具有的值。我可以让所有输入字段相应地填充，但我似乎也无法集成填充选择字段。如果我只有一个选择字段，我可以让它填充没有问题，但是如何让脚本填充两个输入并使用适当的数据进行选择？任何指导将不胜感激。

这里是字段元素的html sn-p：

Email <input type="text" style="width:75%;" name="rEmail" id="rEmail" class="roomForm" placeholder="[e-mail]">

Status <select name="rStatus" id="rStatus"><option value="Disabled">Disabled</option><option value="Enabled">Enabled</option></select>

下面的脚本填充了输入字段，并且我注释掉了选择附加，因为它只是将 JSON 中的所有内容添加到列表中，而不仅仅是选择的数据。

            $.ajax(
            type:'GET',
            url:"getroomfields.php?id="+row_id,success:function(result)
            var json = $.parseJSON(result);
                var $select = $('#rStatus');
                //$select.find('option').remove();
                for(key in json[0])
                if(json[0].hasOwnProperty(key))
                    $('input[name='+key+']').val(json[0][key]);
                //  $select.append('<option value=' + key + ' selected>' + json[0][key] + '</option>');
                
                
            ); // end ajax

提前感谢您！

这是 JSON：

[
    "rID": "1",
    "rName": "Test 123 Co",
    "rLocation": "Anywhere, World",
    "rContact": "John Doe",
    "rPhone": "555-555-5555",
    "rEmail": "[e-mail]",
    "rStatus": "Enabled",
    "rAdded": "05-03-2018"
]

【问题讨论】：

你能展示你的 json 样本吗？

没问题，我会包括在内，谢谢！

添加在上面的原始帖子中。

在尝试向其附加值之前，您必须检查key 是否与您的选择元素的 id 属性相同。

【参考方案1】：

您的select 选项似乎已经存在，我不确定您为什么要尝试添加任何内容。 .val() 适用于下拉菜单，就像输入一样。

我删除了一些不必要的代码并更改了您的选择器，因此它不仅仅指定inputs。

for (var key in json[0]) 
  if (json[0].hasOwnProperty(key)) 
    $('[name=' + key + ']').val(json[0][key]);
  

https://jsfiddle.net/vLb89bas/

您也可以按 id 选择：$('#' + key)

【讨论】：

哇，我不敢相信我忽略了这一点……我在兜圈子哈哈……/smacks_forehead。 =p 非常感谢，你真棒！