使用 JavaScript 插入 HTML 实体的问题

发布于 2024-10-09 08:34:49 字数 1665 浏览 7 评论 0原文

我有以下 JS 来动态更改表单内 HTML 选择列表的内容：

<script type="text/javascript">

var provincias = [];

provincias['bsas'] = new Array('Capital Federal','San Martin','Quilmes');
provincias['cba'] = new Array('C&acute;rdoba','La Carlota','Rio Cuarto');
provincias['nqn'] = new Array('Neuqu&eacute;n','Cipolletti','Plottier');

function setLoc() {
    provSel = document.getElementById('provincia');
    locList = provincias[provSel.value];
    updateLista('localidad', locList, locList);
}

function updateLista(fieldID, newOptions, newValues) {
    selectField = document.getElementById(fieldID);
    selectField.options.length = 0;
    for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
    }
}

</script>

列表是：

<select name="provincia" id="provincia" onchange="setLoc();">
    <option value="bsas">Buenos Aires</option>
    <option value="cba">C&oacute;rdoba</option>
    <option value="nqn">Neuqu&eacute;n</option>
</select>

<select name="localidad" id="localidad">
    <option value="">Seleccione una localidad</option>
</select>

它工作正常，但我不明白 JavaScript 插入的实体的输出是文字的原因是什么：浏览器时您会看到 á 而不是 á。更糟糕的是，如果我用特殊字符更改实体，浏览器会显示一个奇怪的问号（？）符号，这就是我首先开始使用实体的原因。

有谁知道是否有解决这个问题的捷径（比如特殊的 JS 字符景观）？或者我应该使用innerHTML 重新编写我的脚本来显示输出？

还有一件事：请记住，这是一个小列表，但此脚本将适用于从包含大约 4000 个条目的 XML 文档（我国州和城市的完整列表）加载表单数据。我也将使用 MySQL 数据库来存储表单数据）。这对我来说就像一场字符集噩梦...

顺便说一句：我正在使用没有 BOM 的 utf8 进行编码（现在我写这个，我认为这就是问题...）。

干杯，提前感谢大家的好想法。

原文

I have the following JS to dynamically change the content of an HTML select list inside a form:

<script type="text/javascript">

var provincias = [];

provincias['bsas'] = new Array('Capital Federal','San Martin','Quilmes');
provincias['cba'] = new Array('C´rdoba','La Carlota','Rio Cuarto');
provincias['nqn'] = new Array('Neuquén','Cipolletti','Plottier');

function setLoc() {
    provSel = document.getElementById('provincia');
    locList = provincias[provSel.value];
    updateLista('localidad', locList, locList);
}

function updateLista(fieldID, newOptions, newValues) {
    selectField = document.getElementById(fieldID);
    selectField.options.length = 0;
    for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
    }
}

</script>

And the list is:

<select name="provincia" id="provincia" onchange="setLoc();">
    <option value="bsas">Buenos Aires</option>
    <option value="cba">Córdoba</option>
    <option value="nqn">Neuquén</option>
</select>

<select name="localidad" id="localidad">
    <option value="">Seleccione una localidad</option>
</select>

It works Ok, but I don't understand for what reason the output of the entities inserted by JavaScript is literal: in the borwser you see á instead of á. Worse yet, if I change the entities by the special characters, the browser displays a weird question mark (?) symbol, the reason for which I started to use entities in the first place.

Does anyone know if there's a shortcut to solve this (like a special JS character scape)? or should I reformulate my script using innerHTML to display the outputs?

One more thing: keep in mind that this is a small list, but this script will be adapted to load the form data from an XML document with around 4000 entries (the complete list of states and cities of my country). And I will be using MySQL databases to store the form data as well). This is like a charset nightmare for me...

BTW: I'm coding in utf8 without BOM (now I write this I thik this is the problem...).

Cheers, and thank you all in advance for the good thinking.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

盗琴音 2024-10-16 08:34:49

看来 javascript 将选项文本视为纯文本，因此您确实必须使用innerHTML，如下所示：

function updateLista(fieldID, newOptions, newValues) {
selectField = document.getElementById(fieldID);
for(i=0; i<newOptions.length; i++) {
    selectField.options[i] = new Option();
    selectField.options[i].innerHTML = newOptions[i];
    selectField.options[i].value = newValues[i];
    }
}

PS。 'cba' 数组的第一个值应该是 'Córdoba' 而不是 'C´rdoba'

it seems that javascript treated option text as plaintext, so you indeed have to use innerHTML, like so:

function updateLista(fieldID, newOptions, newValues) {
selectField = document.getElementById(fieldID);
for(i=0; i<newOptions.length; i++) {
    selectField.options[i] = new Option();
    selectField.options[i].innerHTML = newOptions[i];
    selectField.options[i].value = newValues[i];
    }
}

PS. your first value of 'cba' array should be 'Córdoba' instead of 'C´rdoba'

回复收藏 0 原文

~没有更多了~