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

Posted 2023-02-22

【中文标题】如何在 HTML 选择选项列表中保留空间<option value=\'hi this\'>hi</option>

【英文标题】：how to preserve space in HTML select option list<option value='hi this'>hi</option> [duplicate]如何在 HTML 选择选项列表中保留空间<option value='hi this'>hi</option>

【发布时间】：2016-07-07 19:24:12

【问题描述】：

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

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

我从服务器获取的数据

但是在它呈现为 html select 之后，它会省略 space.whole 之后的单词，但是一旦我得到 value ，它就只有一半（双引号中的值）。我尝试添加 ，但它按原样显示。它没有渲染为空间。请给出你的建议。

【问题讨论】：

.append("<option value='" + item.Brand + "'>" ... 注意单引号

eval()?严重地？我不认为你真的想要那个，我很确定你不需要它。 brandObj 可以有什么价值？

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

brandObj 有我从服务器获取的 json 字符串。

嗯，对于 IE7，正确的做法是将 json2.js 包含在条件 cmets 中并调用 JSON.parse()。 IE8 及更高版本原生支持 JSON，不需要额外的 libaray。换句话说，除非您的目标是 IE7，否则您可以直接使用JSON.parse()。见***.com/questions/3326893/…。

【参考方案1】：

感谢：Milind Anantwar，我采纳了他的想法并解决了一个困扰了大约 5 天的问题。

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

【参考方案2】：

正如我在comment 中提到的，可以通过将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，对我来说，当您需要下拉菜单中的“myvalue 123”之类的值时，其他解决方案不起作用，而当您需要该值时，您会得到“myvalue”。

【参考方案3】：

您应该将属性值的值包含在引号（Quote It）中。如果您不将它们包装在引号中，则空格后的值将被视为属性本身：

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