0

我有以下循环遍历返回的 json 数据的 jquery 代码，由于某种原因，它在被分配为值而不是文本时将郊区分割为一个空格，我无法弄清楚为什么会发生这种情况。

我的代码

$.each(data , function( index, obj ) {
                    $.each(obj, function( key, value ) {
                        var suburb = $.trim(value['mcdl01']);
                        var number = $.trim(value['mcmcu']);
                         $("#FeedbackBranchName").append("<option value=" + suburb + ">" + suburb + " (" + number + ")</option>");
                    });
                });

返回结果样本

<option **value="AIRLIE" beach=""**>AIRLIE BEACH (4440)</option>
<option value="ASHMORE">ASHMORE (4431)</option>
<option **value="BANYO" commercial=""**>BANYO COMMERCIAL (4432)</option>
<option value="BEENLEIGH">BEENLEIGH (4413)</option>
<option value="BERRIMAH">BERRIMAH (4453)</option>
<option **value="BOWEN" hills=""**>BOWEN HILLS (4433)</option>

请注意，对于 AIRLEE BEACH、BANYO COMMERICAL 和 BOWN HILLS，第二个单词是如何从 value 属性中分离出来的，但在文本级别上没问题。

任何人都知道为什么会发生这种情况？

谢谢

4

3 回答 3

4

只需将您的属性值包装为引号，以便它的一部分（在空格之后）不被视为新属性。

$("#FeedbackBranchName").append("<option value='" + suburb + "'>" + suburb + " (" + number + ")</option>");
                                                ^_________________________________

更好地使用 jquery 元素构造函数。

 $("#FeedbackBranchName").append($('<option/>', {
    value: suburb,
    text: suburb + " (" + number + ")"
}));
于 2013-07-01T23:07:44.713 回答
2

一般来说，在创建新的 HTML 元素时，最好让 jQuery 为您进行适当的转义：

$.each(obj, function( key, value ) {
    var suburb = $.trim(value['mcdl01']),
    number = $.trim(value['mcmcu']);

    $("#FeedbackBranchName").append($("<option/>", {
        value: suburb,
        text: suburb + " (" + number + ")"
    }));
});

您还可以使用Option构造函数：

$("#FeedbackBranchName")
   .append(new Option(suburb + " (" + number + ")", suburb));
于 2013-07-01T23:10:19.223 回答
1

这是因为您没有在value属性周围加上引号。

生成的实际 HTML 是这样的：

<option value=AIRLIE BEACH>AIRLIE BEACH (4440)</option>

浏览器会这样解释：

<option value="AIRLIE" BEACH="">AIRLIE BEACH (4440)</option>

要解决此问题，您可以将值用引号括起来，如下所示：

$("#FeedbackBranchName")
    .append('<option value="' + suburb + '">' + suburb + " (" + number + ")</option>");

或者更好的是，使用 jQuery 来设置值，而不是将 HTML 构建为字符串：

$("#FeedbackBranchName").append(
    $("<option />")
        .val(suburb)
        .text(suburb + ' (' + number + ')')
);
于 2013-07-01T23:07:42.813 回答