为什么浏览器会更改 <select> 元素中选项的值？

Question

我有一个选项是在 php.ini 中生成的。一些值包括 HTML 特殊字符，如 &或者像这种情况下的 Ø （丹麦语Ø）。

由于某种原因，浏览器更改了选项的值，使其难以与传递给简单比较函数的相同值进行比较。

选择选项 1 ("Østrig") 并将 "Østrig" 传递给下面的 countryFilter 函数，它将返回 false ???调试它我可以看到 e.value 等于“Østrig”，而不是我在 HTML 中设置的值？？

HTML：

<form>
  <select id='country' onchange='filter(false);'>
    <option value=''>* Alle *</option>
    <option value='&Oslash;strig'>&Oslash;strig</option>
    <option value='Argentina'>Argentina</option>
    <option value='Australien'>Australien</option>
...

JavaScript：

  function countryFilter(country)
  {
    var e = document.getElementById('country');
    if (e.value=='') return true;
    return e.value.localeCompare(country)==0;
  }

将显示的文本翻译成 & 和 Ø 是有意义的，但 value 选项中的数据应该保持不变。

如果我更改要在 JavaScript iso php 中动态添加的选项，那么它会再次工作，但显示的值不会被翻译：-/

1) 为什么浏览器（经过 Chrome 和 IE 测试）会弄乱我的数据？

2) 有没有办法避免这种情况？

Answer 1

value-attributes 的内容定义为 CDATA(http://www.w3.org/TR/html401/interact/forms.html#adef-value-OPTION)。

对于 CDATA，documentation says：

CDATA 是文档字符集中的字符序列，并且 可能包括字符实体。用户代理应该解释属性 值如下：

• 用字符替换字符实体，
• 忽略换行，
• 用一个空格替换每个回车符或制表符

这就是浏览器所做的，他用字符替换实体。

你可以例如使用Østrig 进行比较，或者当您想将字符串与实体一起使用时，请在比较之前解析字符串：

  function countryFilter(country){
    var e = document.getElementById('country'),
        n = document.createElement('span');
        n.innerHTML=country;
    if (e.value=='') return true;
    return e.value.localeCompare(n.textContent)==0;
  }