javascript - 当值具有 HTML 字符时，按其值选择元素

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”中的值和值字段完全相同，但我收到“未定义”。

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

提前致谢，迈克尔

Answer 1

经过一些更多的测试，我刚刚找到了解决方案 - 也许它对其他人有帮助。它不使用 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];