Question

此刻我遇到了以下问题而且我的想法已经用完了。我的选择框包含不同的选项，其值字段中包含HTML字符：

<select>    
<option value="Zinksulfat" selected="selected">Zinksulfat</option>
<option value="Zypressen&ouml;l" selected="selected">Zypressenöl</option>
<option value="Wirkstoff&quot;Mit'Anf&uuml;hrungszeichen" selected="selected">Wirkstoff"Mit'Anführungszeichen</option>
</select>

对于jQuery中的变量的HTML编码，我使用这个简单的函数：

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace('ü', '&uuml;').replace('ö', '&ouml;');
}

现在我尝试通过它的值获取选项对象（“select”是选择框）：

// Set the element value
var elementValue = 'Wirkstoff"Mit'Anführungszeichen'; // Invalid I know - only for description purpose
    elementValue = htmlEntities(elementValue);

return select.find('option[value="'+elementValue+'"]')[0];

因此，对于没有HTML字符的元素，它就像一个魅力（例如“Zinksulfat”）。但对于具有HTML字符的元素，它不起作用。虽然“elementValue”和值字段中的值完全相同，但我收到“ undefined ”。

有人知道必须做什么神奇的事情才能在选择器中使用HTML字符吗？

提前致谢，迈克尔

Answer 1

根本不需要你的功能。这只是一个获取字符串正确的情况（在单引号字符串中转义任何单引号）。 HTML编码翻译由jQuery完成：

var elementValue = 'Wirkstoff"Mit\'Anführungszeichen';
$("select").find('option[value="'+elementValue+'"]').css("color", "red");

JSFiddle： http://jsfiddle.net/TrueBlueAussie/prnxbdp8/

在下拉列表中选择另一个选项，以查看匹配项现在是红色。

Answer 2

我刚刚在一些测试后找到了解决方案 - 也许它可以帮助其他人。它不使用select.find（）方法，而是使用.filter（）方法：

不适用于HTML字符：

return select.find('option[value="'+elementValue+'"]')[0];

<强>使用：

// Find and return the option element from select box
var foundOption = select.find('option').filter(function() {
    return (htmlEntities(this.value) == elementValue);
}).show();

return foundOption[0];

Answer 3

问题在于转义字符串。请参阅小提琴以获得解决方案。

http://jsfiddle.net/769gp0nn/

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace('ü', '&uuml;').replace('ö', '&ouml;');
}

var elementValue = 'Wirkstoff"Mit\'Anführungszeichen';

console.log($("select").find('option[value="'+elementValue+'"]')[0]);

Answer 4

它很容易修复。你需要转义elementValue。

只是这样做：

elementValue = htmlEntities(elementValue);

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace('ü', '&uuml;').replace('ö', '&ouml;');
}

它应该有效。 https://jsfiddle.net/8pf9vooc/

当值具有HTML字符时，选择元素值

4 个答案: