Using Multiple select tags

[mevasquez]

I am having some problems in figuring out how to transverse multiple select tags that contain multiple option tags.

For example

<form name=form action="" method=post>
  <select name=selName onChange="clrSelect(selName)">
     <option value=1>1</option>
     <option value=2>2</option>
     <option value=3>3</option>
  </select>
  <select name=selName onChange="clrSelect(selName)>
     <option value=a>a</option>
     <option value=b>b</option>
     <option value=c>c</option>
  </select>
  <select name=selName onChange="clrSelect(selName)>
     <option value=x>x</option>
     <option value=y>y</option>
     <option value=z>y</option>
  </select>
<input type=button onClick="go(this.form)" value=Search>
</form>

The onChange event basically clears the other values in the other select tags so that only one select tags has a value (not working). The onClick event, when the button in click, sends the information to a javascript which will determine what the value of the selected tag is. There should be only one value. I am having problems if figuring out the for loop to get to the answer. I keep getting a "value is not an object or Null error".

Any suggestions in getting me started would be appreciated. Been tring to figure this out all day. I would prefer putting everything into an array then I could use a for loop to handle this because each select tag contains many options.


TIA

Mike V.

 

[rac2]

The HTML that you show is not producing the Javascript error. You may wish to post the Javascript code that gives the error.

Do you really mean that you are using the same name for three different <SELECT>s? If so, you may wish to consider giving them different names to eliminate a possible confusion.

You get the value of the selected option like this-

var elementABC = document.forms[0].selABC;
var optionChecked = elementABC.selectedIndex;
var valueABC = elementABC.options[optionChecked].value;

If, as you say, only one of the <SELECTS>s has an option selected then this code will indeed generate errors because the selectedIndex value will be undefined for all but one of them. So wrap the array reference in an IF statement.

...
optionChecked = elementABC.selectedIndex;
if ( optionChecked ) {
      valueABC = elementABC.options[optionChecked].value;
}
...
//Repeat for each <SELECT>

 

[mevasquez]

This still gives me an error
var cnt = elementABC.length

for (i=0;i<cnt; i++){
  optionChecked = elementABC[i].selectedIndex; //error here
  if ( optionChecked ) {
      valueABC = elementABC.options[optionChecked].value;
  }
}

Reason for this is that depending on what select statement will determine the sql statement. I am just trying to minimuze a long if statement.

How do you catch an error such as 'selectedItem' is null or not an object.

Mike V

 

[cLFlaVA]

You're also missing two " marks in your code, not sure if this was a typo in the forum, or relevant to your code.

<form name=form action="" method=post>
  <select name=selName onChange="clrSelect(selName)">
     <option value=1>1</option>
     <option value=2>2</option>
     <option value=3>3</option>
  </select>
  <select name=selName onChange="clrSelect(selName)[red]"[/red]>
     <option value=a>a</option>
     <option value=b>b</option>
     <option value=c>c</option>
  </select>
  <select name=selName onChange="clrSelect(selName)[red]"[/red]>
     <option value=x>x</option>
     <option value=y>y</option>
     <option value=z>y</option>
  </select>
<input type=button onClick="go(this.form)" value=Search>
</form>

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!

 

[rac2]

I think you can simply use the variable as the condition in an if statement, undefined values are treated as false.

if ( selectedItem ) {
   //go forward.
} else {
   //bad news.
}

Remember if ( document.images ) ?


At any rate, the error in your code snippet could be the array subscript on elementABC.selectedIndex. If you are using the same elementABC that I defined, it is not an array; it is a reference to the <SELECT> object, the one named selABC. One of the members of elementABC is the array options.

And there is no need to loop through the options; the index of the selected option is given directly as the value of elementABC.selectedIndex.

Do you mean to use the same name for all of the <SELECT>s? Is that the reason for the loop? I dont believe the DOM provides an array for form elements which have the same name.

You could loop through the form elements, testing each one for its name, then see if it had a selected option. But really would that be any more simple than using three distinct names and three if statements to check them? Maybe if you had thirty selects.

At any rate looping through form elements goes like this.

var optionChecked;
var valueABC;
for (var i=0; i < document.forms[0].elements.length; i++) {
   if ( document.forms[0].elements[i].name == "selABC" ) {
      optionChecked = document.forms[0].elements[i].selectedIndex;
      if ( optionChecked ) {
         valueABC = document.forms[0].elements[i].options[optionChecked].value;
      break;
   }
}