Link to home
Start Free TrialLog in
Avatar of JoeUS
JoeUS

asked on

Select corresponding select option by value

Hi,

I have a select object and the following script
document.getElementsByName(objSel).length
is giving me 1

I have four options in it
Avatar of netsmithcentral
netsmithcentral
Flag of United States of America image

document.getElementsByName(name) returns an array containing object references to every object with that name on a page.  To access the acutal object you have to refer to it's number within the array:

document.getElementsByName(objSel)[0].length; <== will return the length of the select.

A better method is to use the document.getElementById(id) method.  This returns exactly one object, the one with a given ID.
Avatar of JoeUS
JoeUS

ASKER

In this case I am looking for the lenght of the array
 
I set a (var selVal) in global and would like to automatically set "selectedIndex" for
the corresponding select option at form onLoad

smtng like:

<script>
function setSelEcho() {
var selVal = 'foo3';
var inputs = document.getElementsByName('objSel');
for(var i=0; i < inputs.length; i++) {      
        if(inputs.option[i].value == selVal ) {
                inputs.option[i].selectedIndex= true;
          }      
     }
}
</script>

<body onLoad="setSelEcho();">
<form>
<select id="objSel" name="objSel">
<option value="foo2">foo2</option >
<option value="foo3">foo3</option >
<option value="foo4">foo4</option >
</select>
</form>
</dody>
ASKER CERTIFIED SOLUTION
Avatar of netsmithcentral
netsmithcentral
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of JoeUS

ASKER

my inputs.length still returning 1
any idea why?
Avatar of JoeUS

ASKER

//I did work with this one quite hard and don't want anyone to spend the time on this more than
it is absolutely necessary

Thank you netsmithcentral for the hint, it finally lead me to the solution

<html>
<script language="JavaScript" type="text/javascript">
function setSelEcho() {
var selVal = 'foo3';
var inputs = document.getElementsByName('objSel');

//Important!!! to go after the "inputs[0]" or else will not find the object and see the options
//I am not sure if it has anything to do with multiple forms on the same page
var nops = inputs[0].options.length;

for(var i=0; i < nops; i++) {
        if(inputs[0].options[i].value == selVal ) {
                inputs[0].options[i].selected=true;
          }      
     }
}
</script>

<body onLoad="setSelEcho();">
<form>
<select id="objSel" name="objSel">
<option value="foo2">foo2</option >
<option value="foo3">foo3</option >
<option value="foo4">foo4</option >
</select>
</form>


</dody>
</html>