SCRIPTING:

heidi klum
SET FOCUS DYNAMICALLY TO AN OPTION IN A DROP DOWN/SELECT BOX MENU SEARCHING THE NEW OPTION BY VALUE, TEXT OR INDEX
A script many want. Since given a drop down menu you cannot automatically put focus to an option that the user has not intentionally selected and bring thus it to the foreground, this subroutine will let you do that either updating the selected option by a provided index number or by searching a certain text either within the option set visible texts or within the option set invisible values.
September 2001
{ @ }

The model above is Heidi Klum
LOADS OF HEIDI KLUM ON THE NET


The main subroutine
First, the codex for this subroutine which will update without user's input a drop down menu by bringing to the focus/foreground the desired option

This function will accomplish the task of automatically updating the selected index (the one brought to the foreground when an user selects an options by a menu option set, that is) of a drop down menu via script, namely without waiting for the interaction of the user.

Many webmasters wanted a function that, for instance upon selection in another drop down menu, could not thoroughly update another drop down menu (although I have a script for that too: it is here - click) but simply bring the focus to a specific option in another drop down menu.
I myself acknowledge the utility of this task, since without a direct user interaction it is impossible, apparently, to bring focus to something like a drop down menu option.

My approach will not just swap between the two options but will rewrite the whole option set so that if to position x is brought option y, what will follow option y will be option y+1 thus preserving some rational ratio in the environment. If the end of the option list is reached, possible subsequent left y+1 options that have not found place until then, will be listed from top, thus scheming a circular loop.
I will provide you with 3 possibilities for swapping the index which is selected by default (if none I assume the first option in the list is the defaulting one):
  1. Providing an index thus swapping the selected one with this latter one, and redrawing the list accordingly
  2. Providing a string in the text of the options thus checking if such a string is present in the option texts and if found I use it to perform the swapping with it and consequent redrawing of the list. If it is not found, I do nothing and let the list unaffected.
  3. Providing a string in the values of the options thus checking if such a string is present in the option values's and if found I use it to perform the swapping with it and consequent redrawing of the list. If it is not found, I do nothing and let the list unaffected.
So, here is your function:

THE setFocus CODEX

Lines:
Joan Miro painting



How it works and gets invoked. The second function.
Comments on how to use it for searching text, values, or just indexes and swapping them. The second setFocus function.

T If you just want to swap an index with another index number (that is, providing just the index number of the option that should replace the selected one) all you have to do is to invoke the function passing like object a full path reference to the form and the object name (let's assume its name is name="selectName") as its first argument and the index number of the options you want to swap with the selected one as its second argument:
setFocus(document.formName.selectName, 12)
If on the other hand you do not know for sure the index number of an option but you know its text or value:
  1. Beware: when you provide the string to search for, either in the text or value sets, this string must be a perfect match: I do not perform any validation since I assume many values could bring case sensitive contents thus also your input string to search for must be:
    1. Case sensitive: searching for T is not the same as searching for t
    2. A perfect match: add a whitespace that is not actually present in the searched string or a trailing whitespace which is not in the option text or value, and you'd get no match. My suggestion: use copy and paste if you're hard coding it not by references but by direct strings (which may happen at times on in certain circumstances): when at programming, almost a match means no match at all.
  2. Searching option set texts? you must set the arguments as follows:
    1. 1st argument is still the usual path to the object
    2. 2nd argument is the string you search for having great care to include it in between single quotes such as 'search for this'
    3. 3rd argument must be set to 2
    4. setFocus(document.formName.selectName,'search for this',2)
  3. Searching option set values? you must set the arguments as follows:
    1. 1st argument is still the usual path to the object
    2. 2nd argument is the string you search for having great care to include it in between single quotes such as 'search for this'
    3. 3rd argument must be set to 1
    4. setFocus(document.formName.selectName,'search for this',1)
The inner workings of this subroutine, main points are:
  1. If you search for a match, and it is not found, no action is undertaken and the menu is left unaffected
  2. if you provide an index of an option to grab and it exceeds the amount of available options, no action is performed
  3. If no previous index is available as the selected index to swap with, I assume first option as selected (when no select property is set by default, every select defaults to the first option, correct?)
  4. Beware, do not be induced to believe this function works badly: if you provide an index, it will swap that index with the selected one, and will redrawn the list as shown in previous subsection. If you perform subsequent attempts, keep in mind that by now what option contents are listed, for instance, as index 3, are different from those settled in at index 3 previously! Thus keep this in mind before arguing the subroutine does not work...
    Also, bear in mind that options get numbered starting by number zero included.
  5. You may say: what if I want to reset the original order? I could provide another subroutine for that, but if you want to do something with this one, set focus to index 0, then search for the text string which you know was the leading one and perform the swapping with that: it will probably reset everything, don't you think it could be?
  6. Last but not least: in the he last for loop the two subsequent semicolons ;; are not an error, so do not change that!
Known issue
on Netscape it may appear in the select-one example (namely the bottom-most select) that the new item has not been swapped. If you drop down the menu yet you're to see it has: apparently some versions of Netscape can't paint the new situation so that it seems there are two options with the same values (see image: two ZEROES appear listed yet truly only one such option exists). Yet the swapping has been performed, it is a painting problem, I'd say truly a Netscape bug.
Test it on Netscape if you want.
example

You must now be aware that there are two possible types of drop down menus by an html <select size="1"> tag: those whose size is one (namely only one option is visible at first sight) and those where more options are visible at first sight for their size is higher than number 1.

As already hinted, in the latter case I had to make a decision: since more options were visible, it was just not in the cards putting the new options to be focused on top of the options stack and then all the rest after it: if the function was to be up to what it promises, namely swapping the selected option, I just could not move it on the top if it was not the option on the top that was selected.
So, it is possible to have to swap an option that is, say, halfway in a full visible range of many options in a option select box. How to redraw the options that surround it, after what logics?
The only solution with a rationale in it that I can envision was, as said: all the options whose index was lower than the just replaced one go before it, the others after it, and the remains trail.
Say if options are [01234567] and I want to swap 5 with 3 the result would be:
[23456701]

If you have to deal with a size 1 select box, this problem of the sorrounding is no longer present: the selected option in a size 1 drop down menu always appears as being the one on top, sorrounded by no other visible option, for the size 1 range sets too narrow a loophole to check what option is on top and what on bottom of the selcted one once the selection has been performed.
Thus, if you do deal with a size 1 drop down menu (the default case with menus, actually) and what you'd like to do is to swap an index and make it follow with all the other indexes (except obviously the swapped one) in the original order namely:
[50123467]

Given the popularity of this file, I decided to provide you with a second version: this one has these caveats: you must use it only with select drop down menu whose size is 1, and this produces the sequential order just illustrated in the example: [50123467]
This other function is named setFocus2 and takes in these arguments:
  • object: must be a path to the html form select object, exclusive of indexes of option: say
    document.formName.selectMenuName
  • newIndex: a String, and it represents a characteristic of the new option that you want to put to the fore.
  • newByIndexValueText: defaults to zero, and can accept only 3 values:
    1. 0: means you are searching for the option whose index is the one stored into newIndex, and you want this such option to be swapped with the currently selected option.
    2. 1: means you are searching for the option whose value is the one stored into newIndex, and you want this such option to be swapped with the currently selected option.
    3. 2: means you are searching for the option whose text is the one stored into newIndex, and you want this such option to be swapped with the currently selected option.
Here is your other function code:

THE setFocus2 CODEX

Lines:
Joan Miro painting

Here is an active example for you:
TEST FORM
Use this Menu
Swap the selected index with option carrying the text "text option :

"


Salma Hayek
Salma Hayek
Use this Menu
This is a size 1 menu.
Use setFocus2 ?
Swap the selected index with what is at index:



The model above is Salma Hayek
LOADS OF SALMA HAYEK ON THE NET