Question

我正在以这种方式构建一个下拉菜单：

var htmlString = '<select id="sAddress">';

for (var i=0; i<branchesArray.length; i++){     
    htmlString += '<option value=' + branchesArray[i].branchName + '>' + branchesArray[i].branchName + '</option>';
}
htmlString += '</select>';
$('.shopAddress').append(htmlString);

现在，问题是，如果branchesArray[i].branchName包含一个单词而不是正常，但如果它包含两个用空格分隔的单词，而不是得到这个：

<option value="West Coast">West Coast</option>

我得到了这个：

<option Coast="" value="West">West Coast</option>

我该如何解决这个问题？

Answer 1

当属性的值包含空格时，必须使用引号。如果您的字符串可能包含双引号，则必须替换它（请参阅第二个示例）：

htmlString += '<option value="' + branchesArray[i].branchName + '">' + branchesArray[i].branchName + '</option>'

替换HTML实体"的双引号：

htmlString += '<option value="' + branchesArray[i].branchName.replace(/"/g, '&quot;') + '">' + branchesArray[i].branchName + '</option>'

目前，您生成的HTML如下所示：

<option value=West Coast>West Coast</option>  which is interpreted as:
<option value="West" Coast>West Coast</option> (attributes: value=west, Coast="")
<option value="West" Coast="">West Coast</option>

当值包含多个单词时，选择标记中的拼写选项

1 个答案: