如何在HTML选择选项列表<option value ='hi this'> hi </ option>中保留空格

Question

我有一个选择控件.我尝试使用jquery更新此控件,但空格省略后的值.

if (brandObj != "") {
    brandObj = eval("(" + brandObj + ")"); 
    $.each(brandObj, function(i, item) {
        $("#<%=listBrand.ClientID%>").append(  "<option value="+ item.Brand + ">" + item.Brand + "</option>");
    });

}

我从服务器获得的数据

但是在它呈现为HTML选择之后,它会在space.whole值之后省略该单词但是一旦我得到该值,它只有一半(双引号中的值).我试图添加, 但它显示为原样.它不是渲染为空间.请给你的建议.

Answer 1

你应该在quote(Quote It)中包含属性值的值.如果你没有将它们包装在quote中,那么space之后的值将被视为属性本身:

$("#<%=listBrand.ClientID%>").append("<option value='"+ item.Brand + "'>" + item.Brand + "</option>");

Answer 2

正如我在评论中提到的，可以通过将value属性值包装在引号中来解决问题。

.append("<option value='" + item.Brand + "'>" ... 
                       ^                  ^

但是，我建议使用Option构造函数<option>动态创建新元素。

演示：

.append("<option value='" + item.Brand + "'>" ... 
                       ^                  ^

var arr = [{
    text: 'Hello World!',
    value: 'hello World'
}, {
    text: 'Bye World!',
    value: 'bye World'
}];

var select = document.getElementById('mySelect');

// Iterate over array
arr.forEach(function (obj, i) {
    // Create new <option> with dynamic value and text
    // Add the <option> to the <select>
    select.appendChild(new Option(obj.text, obj.value));
});