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

Question

我正在尝试将我通过 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>

Answer 1

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

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