Using Select Multiple with Javascript

freedomsam

Javascript Coding Tip...

For sub-average coders like myself, dealing with select objects on HTML forms can be a pain in the posterior orifice if the multiple option is used. PHP expects the name of the select object to be an array, such as <select name=mylist[] multiple>. However, Javascript doesn't like the brackets "[]" in mylist[]. Thus, the following Javascript code fails. It is supposed to unselect all items in the select list.

AstroTeg

This works in Netscape v4.x?

philhuen

This is what you have to do:

change all document.myform.mylist[] to
document.myform.elements['mylist[]']

Let me give you an example:

<html>
<head>
<title>Add/Delete Options From A Select</title>
<link rel="stylesheet" href="https://host31.ipowerweb.com/~usitexpe/css/philstyle.css">
<script type="text/javascript">
function addOption(selectObject,optionText,optionValue) {
var optionObject = new Option(optionText,optionValue)
var optionRank = selectObject.options.length
selectObject.options[optionRank]=optionObject
}

function deleteOption(selectObject,optionRank) {
if (selectObject.options.length!=0) { selectObject.options[optionRank]=null }
}

function testAdd(aObject) {
var formObject = document.testForm

var ex_text
if (formObject.optionText.value!="" && formObject.optionValue.value!="") {
   ex_text = formObject.optionText.value + ' -> $' +  formObject.optionValue.value    

    addOption(aObject,ex_text,formObject.optionValue.value)
} else {
    alert("Fill form and click Add")
}

}

function testDelete(aObject) {
var formObject = document.testForm
if (aObject.selectedIndex!=-1) {
deleteOption(aObject,aObject.selectedIndex)
} else {
alert("Select an option and click Delete")
}
}
</script>

</head>

<select class="Input2" name="fruitList[]" width="300" size="10" multiple>
<option>Apple</option>
<option>Kiwi</option>
<option>Banana</option>
<option>Peach</option>
<option>Orange</option>
</select>
<br/>
Fill form and click Add :<br/>
Option Text : <input type="text" name="optionText"/>
Option Value : <input type="text" name="optionValue"/>
<input type="button" value="Add" onclick="testAdd(document.testForm.elements['fruitList[]'])"/><br/>
Select an option and click Delete : <input type="button" value="Delete" onclick="testDelete(document.testForm.elements['fruitList[]'])"/>
</form>

</body>
</html>