1

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&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>

And the list is:

<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>

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 &aacute; 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.

5
  • Issue update: I'm using also PHP session_start, which throws me an error if I don't use utf8 without BOM charset. I avoided this is issue removing the PHP code from the document (since I don't strictly need session_start() in this page), processing all the data in another page with the right coding for PHP, and changing this page back to utf8, which allows me to write the special characters without using entities. However, the issue is still present, it may be needed such a combination of PHP and JS in the future. Dec 26, 2010 at 5:28
  • You need to output chars in the codepage of the html, then entities are not needed
    – mplungjan
    Dec 26, 2010 at 5:55
  • One work around is having three hidden drop down lists with the desired values, then take the values from the proper drop down list instead from JS array. Dec 26, 2010 at 14:40
  • The hidden lists would be a good option if the data were small, but the complete list has 4000 entries... I don't want to write them all in the HTML, but load with AJAX from XML only which is necessary, that's why I'm trying to find a workout with JS for this. Dec 30, 2010 at 4:43
  • If you make sure your editor is in UTF-8 and that you set the encoding headers, there's no need to HTML escape your á, just like it wasn't escaped here on SO Jan 14, 2014 at 19:39

1 Answer 1

1

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&oacute;rdoba' instead of 'C&acute;rdoba'

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.