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):
- Providing an index thus swapping the selected one with this latter one, and redrawing the list accordingly
- 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.
- 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:
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:
-
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:
- Case sensitive: searching for T is not the same as searching for t
- 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.
- Searching option set ? you must set the arguments as follows:
- 1st argument is still the usual path to the object
- 2nd argument is the string you search for having great care to include it in between single quotes such as search for this
- 3rd argument must be set to 2
- setFocus(document.formName.selectName,search for this,)
- Searching option set ? you must set the arguments as follows:
- 1st argument is still the usual path to the object
- 2nd argument is the string you search for having great care to include it in between single quotes such as search for this
- 3rd argument must be set to 1
- setFocus(document.formName.selectName,search for this,)
The inner workings of this subroutine, main points are:
- If you search for a match, and it is not found, no action is undertaken and the menu is left unaffected
- if you provide an index of an option to grab and it exceeds the amount of available options, no action is performed
- 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?)
- 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.
- 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?
- Last but not least: in the he last for loop the two subsequent semicolons are not an error, so do not change that!
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:
- 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.
- 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.
- 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:
Here is an active example for you: