Get Selected Item in JavaScript Form

Somehow JavaScript mixed objects with attributes. For instance:

document.formName.listBoxName[i].selected

formName and listBoxName are references to two bojects. It might be good, but it just crosses the boundary of reference to object and the attributes. Don't know if this the the reason, to get selected item's value in form seems not easy. Google search shows there are so many people ask the question and not get right answers. Here is the easier way:

; function getValueOfSelectedItem(obj)
{ ; var val = obj.options[obj.selectedIndex].value
; if (val) (use val here)
}

To call this function, put the caller on onchange in HTML codes:

onChange="getValueOfSelectedItem(this)"

The beauty of it is there is no mixture of reference and attribute and you can pass anything of it without worry of crossing boundary issue.


http://www.java2s.com/Code/JavaScriptReference/Javascript-Properties/selectedIndexExample.htm

Option List in HTML

Code in HTML:

‹form id="oForm" name="oForm" action="" method="POST"›
‹select id="sList" name="sList" onchange="picking(this.form.cateList)"›
‹/select›
‹/form›

Script in JavaScript:

; var position
; var len

; window.onload = function()
{ ; len = selfCate.length
; for (var i=0; i ; createOption('cateForm', 'cateList', len, 'At the end')
; document.cateForm.cateList[len].selected = true
; position = len
}

; function picking(dropDown)
{ ; var myIndex = dropDown.selectedIndex
; position = dropDown.options[myIndex].value
}

; function createOption(formName, selectName, indexValue, newText)
{ ; var objSelect = document.forms[formName].elements[selectName]
; var objOption = document.createElement("option")
; objOption.value = indexValue
; objOption.text = newText
; if(document.all && !(window.opera)) objSelect.add(objOption)
else objSelect.add(objOption, null)
}

; function removeOptions(selectId, firstNumToKeep, lastNumTokeep)
{ ; var elSel = document.getElementById(selectId)
; var total = elSel.length - lastNumTokeep - 1
; for (var i=total; i>=firstNumToKeep; i--) elSel.remove(i)
}

Special Notes:

1. In window.onload, “document.cateForm.cateList[len].selected = true” is to show what item is preselected in HTML. It is “position = len” to tell PHP what was preselected, if preselected has not been changed.

2. In picking(), apart of the need of global variable, the writing of var position = dropDown.options[myIndex].value is not recommended because some browser request variable declaration and assignment being separated.