Question

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

我的代码

$.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属性中分离出来的，但它在文本级别上很好。

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

由于

Answer 1

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

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

最好使用jquery元素构造函数。

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

Answer 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));

Answer 3

这是因为您没有在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 + ')')
);

每个循环中的字符串自动拆分 - jquery

3 个答案: