& to & how do I stop that

[Wayder]

I am using a dual list and moving option values from one to the other which works quite well, however, when the option with a '&' in it is transferred across it displays as '&' instead of '&'. Any suggestions on how to fix this would be gratefully received.

<script type="text/javascript">

function dualListMoveItems(srcList,destList) {
var sl = document.getElementById(srcList);
var dl = document.getElementById(destList);
for (i=0;i<sl.options.length;i++) {
if (sl.options[i].selected) {
var opt = sl.options[i];
dl.options[dl.options.length] = new Option(opt.innerHTML, opt.value);
sl.options[i] = null; i = i - 1;
}
}
//dualListSortItems(dl);
}

function dualListSortItems(src) {
var tmp = "";
for (i=0;i<src.options.length;i++) {
if (tmp > "") tmp +=",";
tmp += src.options[i].innerHTML + "~" + src.options[i].value;
}
var atmp = tmp.split(",");
atmp = atmp.sort();
src.options.length = 0
for (i=0;i<atmp.length;i++) {
 var opt = atmp[i].split("~");
src.options[i] = new Option(opt[0],opt[1]);
}
}

// to ensure that selected items are listed
function dualListSelectOnSubmit(destList) {
var dl = document.getElementById(destList);
for (i=0;i<dl.options.length;i++) {
dl.options[i].selected = true;
}
}

var submitcount=0;
function checkFields(){
if (submitcount == 0){
dualListSelectOnSubmit('selectedItems');

submitcount++;
}else{
alert("This form has already been submitted. Please wait");
return false;
}
return true;
}

</script>
<form name="form1" id="form1" method="post" action="/interface.php?menu=9.95" onSubmit="return checkFields();">
<div style="width:130px;float:left;">
<select size="10" multiple name="availableItems" id="availableItems" style="width:120px;" onDblClick="dualListMoveItems('availableItems','selectedItems');">
<option value="0">B & B</option>
<option value="1">Flat</option>
<option value="2">House</option>
<option value="3">Pub</option>
</select>
</div>
<div style="width:100px;float:left;">
<input type="button" value="Add" onclick="dualListMoveItems('availableItems','selectedItems');" />
<input type="button" value="Remove" onclick="dualListMoveItems('selectedItems','availableItems');" />
<input name="submit" type="submit" value="Submit">
</div>
<div style="width:130px;float:left">
<select size="10" multiple="multiple" name="selectedItems[]" id="selectedItems" style="width:120px;" onDblClick="dualListMoveItems('selectedItems','availableItems');">
</select>
</div>
</form>

[Fotiman]

You are using innerHTML to access the text of the options. Instead, use the "text" property of the option object. As in:

dl.options[dl.options.length] = new Option(opt.text, opt.value);

[Wayder]

Right on the nose.

Thank you.