javascript - <select>内<option>的value属性不是通过$.each jQuery函数添加的

Question

我收到如下 JSON 响应。

{
   "stateTables":[
      {
         "stateId":15,
         "stateName":"kkkkkkkk"
      },
      {
         "stateId":34,
         "stateName":"qwqw"
      },
      {
         "stateId":61,
         "stateName":"xx"
      },
      {
         "stateId":66,
         "stateName":"aaa"
      }
   ]
}

接收此响应的 JavaScript 函数如下。

var timeout;
var request;

function poplateStateListe(id)
{
    if(!request)
    {
        if(id===null||id===""||id===undefined||isNaN(id))
        {
            var options = $("#state");
            options.find('option').remove().end();
            options.append($("<option/>").val("").text("Select"));

            alert("Please select an appropriate option.");
            return;
        }

        request = $.ajax({
            datatype:"json",
            type: "GET",
            contentType: "application/json; charset=utf-8",
            data: {"id": id},
            url: "PopulateStateList.action",
            success: function(response)
            {
                var list = response.stateTables;
                var options = $("#state");

                options.find('option').remove().end();
                options.append($("<option/>").val("").text("Select"));

                $.each(list, function() {
                    options.append($("<option/>").val(this.stateId).text(this.stateName));
                });
            },
            complete: function()
            {
                timeout = request = null;
            },
            error: function(request, status, error)
            {
                if(status!=="timeout"&&status!=="abort")
                {
                    alert(status+" : "+error);
                }
            }
        });
        timeout = setTimeout(function() {
            if(request)
            {
                request.abort();
                alert("The request has been timed out.");
            }
        }, 30000);
    }
}

我将此回复写给 <select>列表。但是，我按如下方式生成此列表。

<select name="entity.stateId" id="state">
    <option>Select</option>
    <option>kkkkkkkk</option>
    <option>qwqw</option>
    <option>xx</option>
    <option>aaa</option>
</select>

value <option> 的属性没有添加。实际的列表应该是。

<select name="entity.stateId" id="state">
    <option value="">Select</option>
    <option value="15">kkkkkkkk</option>
    <option value="34">qwqw</option>
    <option value="61">xx</option>
    <option value="66">aaa</option>
</select>

为什么不是 value通过 $.each 添加的属性功能

$.each(list, function() {
    options.append($("<option/>").val(this.stateId).text(this.stateName));
});

里面success给定 JavaScript 函数的处理程序？我在这里遗漏了一些明显的东西。

Answer 1

尝试使用 .attr() 而不是 .val()

$.each(list, function() {
    options.append($("<option/>").attr('value', this.stateId).text(this.stateName));
});