如何在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 select 后，它会省略空格后面的单词。整个值还在，但一旦我获取该值，就只有一半（双引号中的值）。我尝试添加 ，但它显示的还是原样。它没有呈现为空格。请给出您的建议。

- nichu09

---

.append("<option value='" + item.Brand + "'>" ... 注意单引号。 （该代码段是JavaScript中的代码，用于将选项添加到下拉列表中，并使用物品的品牌作为选项的值。在此注释中，我简要解释了代码的作用，并提醒读者注意使用单引号。） - Tushar

eval()？认真的吗？我不认为您真的想要那个，而且我很确定您不需要它。brandObj 可以有什么值？ - Tomalak

你没有回答我的问题。brandObj有什么值？ - Tomalak

brandObj有一个我从服务器获取的JSON字符串。 - nichu09

嗯，对于IE7来说正确的做法是使用条件注释包含json2.js并调用JSON.parse()。IE8及以上版本支持原生JSON，不需要额外的库。换句话说，除非你的目标是IE7，否则可以直接使用JSON.parse()。参见https://dev59.com/AnA75IYBdhLWcg3wYH_I。 - Tomalak

@nichu09 使用 JSON.parse(). 支持 IE8+。 - Tushar

Answer 1

您应该在属性值周围加上引号（Quote It）。如果您没有将它们用引号括起来，则空格后面的值将被视为属性本身：

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

- Milind Anantwar

Answer 2

如我在评论中所提到的，问题可以通过将value属性值用引号括起来来解决。

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

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

演示：

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

<select id="mySelect"></select>

- Tushar

---

寻找了好几个小时，谢谢Tushar， 对我来说，其他解决方案在你需要像“myvalue 123”这样的值在下拉列表中时并不能正常工作，而你只能得到“myvalue”这样的值。 - Houshang.Karami

Answer 3

感谢：Milind Anantwar，我借鉴了他的思路并解决了一个困扰了我5天的问题。

    <?php
    foreach($rows as $row):
        $outputstr="$row[Mfrname]";
        $goodstr="<option value='".$outputstr."''>".$outputstr."</option>";
        echo $goodstr;
    endforeach;
    ?>

- RayH