jQuery：将表单输入值设置为 json 数据

Posted 2023-05-09

【中文标题】jQuery：将表单输入值设置为 json 数据

【英文标题】：jQuery: Set form input value to json data

【发布时间】：2014-05-09 09:44:22

【问题描述】：

我正在尝试将我通过 JSON 接收的实例 ID 插入到表单输入中。

function assignCategoryValue()

    var userInput = $("#input_transaction_category").val();
    var formOptions = document.getElementById("id_transaction_category").options;

    for(var i=1;i<formOptions.length;i++)
    
        if(formOptions[i].text == userInput)
        
            // This works.
            $("#id_transaction_category").val(formOptions[i].value);
            console.log(formOptions[i].value);
            return false;
        
    

    alert("Doesn't exist, creating.");
    $.ajaxSetup(async: false);
    var postdata =  'csrfmiddlewaretoken': ' csrf_token ' 
    $.post("create_category/"+userInput+'/', postdata, function( data )
      for(var key in data)
      if (data.hasOwnProperty(key))
        var foo = data[key];
        // The console prints out the value I want.
        console.log(foo);
        $("#id_transaction_category").val(foo);
        // Yet after I set the value, the console prints a blank line.
        console.log($("#id_transaction_category").val()); 
        return false;
    );

根据控制台，JSON 具有我想要的值，但我无法将它插入到我的表单中。

$.post 发送的 JSON 格式如下：

data = json.dumps("category_id" : category_id)
print data

"category_id": 178 // from server console

$.post 接收到的 JSON 是这样的：

$.post("create_category/"+userInput+'/', postdata, function( data )
console.log(data);
Object category_id: 180 // From crhome console

var foo = data[key];
console.log(foo);
180 // From chrome console

我要填写的输入：

<select id="id_transaction_category" name="transaction_category">
  <option value="" selected="selected">---------</option>
  <option value="1">Travel</option>
  <option value="2">New</option>
  <option value="3">test</option>
  .
  .
  .
  <option value="191">nfaha</option>
</select>

【问题讨论】：

请检查此 id "id_transaction_category" 是否与您的页面重复。

@MMK 我只有一次。

您确定您的 jQuery 选择器有效吗？使用console.log($("#id_transaction_category").lenght) 检查您的查询是否有结果。还要在此处发布包含此输入的代码的 html 部分。

#id_transaction_category 是表单输入吗？

@EliasSoares 我想是的。如果模型的实例尚不存在，则调用 create 方法。这是在创建发生之前运行（并有效）的方法。 for(var i=1;i

【参考方案1】：

导致此类问题的一些原因：

您的文档中没有 #id_transaction_category 元素。 您可以使用.val() 设置表单元素的值，例如输入。确保您使用 #id_transaction_category 选择器指向的元素。 确保迭代中的所有值。您应该期望 #id_transaction_category 的值设置为最后一个 data[key]

【讨论】：

Owilaei 我在我的问题中添加了更多信息，也许现在会更明显。

试试$("#id_transaction_category").val(foo.category_id)

在我的控制台中仍然看到空白 :( 同样与 foo.value

做一个测试，而不是foo，用test等静态字符​​串填充输入val并检查控制台日志。

控制台给出了一个空值，而不是什么都没有。