UP AND DOWN IN A SELECT FORM

elisabeth · September 16th, 2004, 04:33 AM

Hello,
I have the following select form:
<SELECT NAME=theName style="width:300px" size=5>
<option>....</option>
</SELECT

- I would like to be able to focus on the first element on the list and then after that to be able to go from one element to the other (up and down the list) but I don't have a clue how.
I have looked at the TABINDEX option but i can't make it work.

Help, please!
ELisabeth

qazi_nomi · September 16th, 2004, 04:49 AM

You can do this

<SELECT NAME=theName style="width:300px" size=5>
<option selected>....</option>
<option>....</option>
<option>....</option>
<option>....</option>
</SELECT>

Numan
--------------------------------------------------
Love is the most precious thing of this world. So find it and grab it!

elisabeth · September 16th, 2004, 04:51 AM

THanks for your quick answer.
This option is only to get the focus on the first element of the list.
Now I would like to be able to scroll up and down this list.
How could I do it?

qazi_nomi · September 16th, 2004, 05:02 AM

Quote:

quote:Originally posted by elisabeth

Now I would like to be able to scroll up and down this list.
How could I do it?

What do you mean by this ?
scroll up and down this list

Numan
--------------------------------------------------
Love is the most precious thing of this world. So find it and grab it!

ChrisScott · September 16th, 2004, 05:07 AM

Hi Elisabeth,

You need to use the selectedIndex property of the select box, the following example should get you started...

Code:

function Move(pSelectBox, pOffset){
    var targetOption = pSelectBox.selectedIndex + pOffset;
    if(targetOption > -1 && targetOption < pSelectBox.options.length){
        pSelectBox.selectedIndex = targetOption;
    }
}

...

<form id="myForm" name="myForm">
    <select id="mySelect" name="mySelect" size="5" style="width: 100px">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </select>
    <input type="button" onclick="Move(this.form.mySelect, -1);" value="up" />
    <input type="button" onclick="Move(this.form.mySelect, 1);" value="down" />    
</form>

HTH,

Chris

elisabeth · September 16th, 2004, 05:56 AM

Thank you so much. It works great!

Now do you know how to get the focus on the first element of this select list? I don't want to use the "selected" option. I want to use the "onBlur" option on one button... and I want the onBlur option to focus on the first field of the select option.

Thanks

ChrisScott · September 16th, 2004, 07:47 AM

Hey Elisabeth,

You need to set the selectedIndex property of the select box to 0, so something like

Code:

onblur="document.forms.yourFormName.yourSelectBoxName.selectedIndex = 0;"

should do it.

HTH,

Chris

joefawcett · September 16th, 2004, 07:56 AM

You can also focus on the select:

Code:

document.forms.yourFormName.yourSelectBoxName.focus();

--

Joe

elisabeth · September 16th, 2004, 12:01 PM

I don't manage to make it work. What am I doing wrong?
The first time, the focus is on the 1st element of the select (thanks to the "Selected" option).
Using the tab, I focus on the "submit" button.
Now, using the tab from the submit button (onBlur option), I want to go focus on the 1st element again.... but I go somewhere else in the page!!!

Help!!!

Test.jsp:
....
<center>
<form method="post" id="nemoName" name="nemoName" action=prg.jsp>
<table>
<tr>
<td align="right" valign="top">Name:</td>
<td><select name="nemonico" style="width:300px" size=10 >
        <option selected>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
     </select>
  </td>
</tr>
</table>
</form>
<center>
<input onclick=document.nemoName.submit() onblur=document.forms.nemoName.nemonic
o type=button tabindex=2 value="Aceptar">
<script language=JavaScript>document.forms.nemoName.nemoni co.focus(); </script>
</center>
...

elisabeth · September 16th, 2004, 12:14 PM

<input onclick=document.nemoName.submit() onblur=document.forms.nemoName.nemonico.focus() type=button tabindex=2 value="Aceptar">
<script language=JavaScript>document.forms.nemoName.nemoni co.focus(); </script>
</center>

I have just realized that the tabindex is not working either.
I want to be able to use the tab to go from the select box to the submit button (I though the tabindex option would do!)