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

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，第二个单词已从值属性中分离出来，但在文本级别上效果很好。

有人知道为什么会发生这种情况吗？

谢谢

Answer 1

只需将属性值用引号引起来，这样它的一部分(空格之后)就不会被视为新属性。

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

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

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