469,349 Members | 1,492 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,349 developers. It's quick & easy.

How to find that a particular option is there in a SELECT element

Hi all,
My page has a SELECT(drop-down list) element and i have to add options dynamically to it.Before adding i have to know whether that option is already there in the drop-down list.

i tried this....
if(myDropDown.options[2].text == "NewYork") {
............
this checks the 3rd option of the drop-down list, but i want to check all the option items.
i can go thru' every option using a for loop like this....
for(i=0;i<options.length;i++)
{
if(myDropDown.options[2].text == "NewYork") {
...........
}

Is this the only way to check whether the option is already there or not?
Is there anything i can try like this....
myDropDown.options.text == "NewYork"

Sorry for elaboration....Thanks for any replies

-Satya
May 9 '07 #1
11 1406
are the details of your select is in database?
if yes try to may do while statements and nest it with if statement.

if not try doing it manually by having a javascript code like

if (document.formname.selectname.options[index].value=="the value needed")
{
}

something like that...

Sorry can't help that much!
God Bless You!
May 9 '07 #2
Thanks for ur reply,
but my population is not from the database and my requirement is to check whether that particular option is there on the browser side itself.
May 9 '07 #3
acoder
16,027 Expert Mod 8TB
Hi all,
My page has a SELECT(drop-down list) element and i have to add options dynamically to it.Before adding i have to know whether that option is already there in the drop-down list.

i tried this....
if(myDropDown.options[2].text == "NewYork") {
............
this checks the 3rd option of the drop-down list, but i want to check all the option items.
i can go thru' every option using a for loop like this....
for(i=0;i<options.length;i++)
{
if(myDropDown.options[2].text == "NewYork") {
...........
}

Is this the only way to check whether the option is already there or not?
Is there anything i can try like this....
myDropDown.options.text == "NewYork"

Sorry for elaboration....Thanks for any replies

-Satya
Yes, you'll have to loop through, but you can break out of the loop once you find a match.
May 9 '07 #4
pbmods
5,821 Expert 4TB
Is this the only way to check whether the option is already there or not?
To speed things up a little bit, you can break out of the loop once you find the matching value. I.e.:

Expand|Select|Wrap|Line Numbers
  1. var present = true;
  2. for(i=0;(i<options.length) && present;i++)
  3.     present = (myDropDown.options[i].value == "NewYork");
  4.  
  5. if(! present) {
  6.     //  I'm sure you know what goes here.
  7. }
  8.  
Now on the other hand, you could do something like this:

Expand|Select|Wrap|Line Numbers
  1. var myOptions = null;  // Declared globally at start of execution.
  2.  
  3. .
  4. .
  5. .
  6.  
  7. function createOptionOrWhateverYouCalledIt(newValue, newText) {
  8. .
  9. .
  10. .
  11. // Load existing options (if we haven't done so already).
  12. if(! myOptions)
  13.     for(var i = 0; i < myDropDown.options.length; i++)
  14.         myOptions[myDropDown.options[i].value] = true;
  15. }
  16.  
  17. if(! myOptions[newValue]) {
  18.     // Create the new option.
  19.  
  20.     // Cache the new option.
  21.     myOptions[newValue] = true;
  22. }
  23.  
May 10 '07 #5
To speed things up a little bit, you can break out of the loop once you find the matching value. I.e.:

Expand|Select|Wrap|Line Numbers
  1. var present = true;
  2. for(i=0;(i<options.length) && present;i++)
  3.     present = (myDropDown.options[i].value == "NewYork");
  4.  
  5. if(! present) {
  6.     //  I'm sure you know what goes here.
  7. }
  8.  
Now on the other hand, you could do something like this:

Expand|Select|Wrap|Line Numbers
  1. var myOptions = null;  // Declared globally at start of execution.
  2.  
  3. .
  4. .
  5. .
  6.  
  7. function createOptionOrWhateverYouCalledIt(newValue, newText) {
  8. .
  9. .
  10. .
  11. // Load existing options (if we haven't done so already).
  12. if(! myOptions)
  13.     for(var i = 0; i < myDropDown.options.length; i++)
  14.         myOptions[myDropDown.options[i].value] = true;
  15. }
  16.  
  17. if(! myOptions[newValue]) {
  18.     // Create the new option.
  19.  
  20.     // Cache the new option.
  21.     myOptions[newValue] = true;
  22. }
  23.  
Thanks pbmods,
I understand the code u have mentioned.....but i don't know really whether it is syntactically correct or not.
and if it is the first time looping through is it OK to use "&& present" in the for loop.
can u correct the syntax and post...
-Satya
May 10 '07 #6
pbmods
5,821 Expert 4TB
but i don't know really whether it is syntactically correct or not.
Which part are ya curious about?

and if it is the first time looping through is it OK to use "&& present" in the for loop.
Yup. We declare present = true on the line above it.
May 10 '07 #7
pbmods
5,821 Expert 4TB
can u correct the syntax and post...
Hm. Now that I'm looking at it, I meant to put this instead:

Expand|Select|Wrap|Line Numbers
  1. var present = false;
  2. for(i=0;(i<options.length) && (! present);i++)
  3.     present = (myDropDown.options[i].value == "NewYork");
  4.  
  5. if(! present) {
  6.     //  I'm sure you know what goes here.
  7. }
  8.  
Since we're trying to determine if the value *is* in the list of options.

The other solution I provided (myOptions object), while requiring a slightly larger memory footprint (we're talking on the scale of maybe 100-200 bytes here), provides the fastest execution that I know of.

Though that code needs one change, too:

Expand|Select|Wrap|Line Numbers
  1. if(! myOptions)
  2.     myOptions = {};
  3.     for(var i = 0; i < myDropDown.options.length; i++)
  4.         myOptions[myDropDown.options[i].value] = true;
  5. }
  6.  
  7.  
May 10 '07 #8
Hm. Now that I'm looking at it, I meant to put this instead:

Expand|Select|Wrap|Line Numbers
  1. var present = false;
  2. for(i=0;(i<options.length) && (! present);i++)
  3.     present = (myDropDown.options[i].value == "NewYork");
  4.  
  5. if(! present) {
  6.     //  I'm sure you know what goes here.
  7. }
  8.  
Since we're trying to determine if the value *is* in the list of options.

The other solution I provided (myOptions object), while requiring a slightly larger memory footprint (we're talking on the scale of maybe 100-200 bytes here), provides the fastest execution that I know of.

Though that code needs one change, too:

Expand|Select|Wrap|Line Numbers
  1. if(! myOptions)
  2.     myOptions = {};
  3.     for(var i = 0; i < myDropDown.options.length; i++)
  4.         myOptions[myDropDown.options[i].value] = true;
  5. }
  6.  
  7.  
Thanks pbmods,
I am new to Java Script and I couldn't understand the present variable.Can u explain briefly how it works in our code.
i have an XML file and have to retrieve the particular node texts and add them
to the drop-down.In that XML file 3 or 4 nodes may contain the same texts.So I have to check whether the drop-down already contains the similar text before adding the next option(next node's text).If the drop-down already contains the same text it just does not add that to the drop-down(anyway it retrieves the text already from XML file).Here is my XML .......

<Country>USA
<Table>
<State>Alabama</State>
<City>Birmingham</City>
<locationId>2</locationId>
</Table>
<Table>
<State>Alabama</State>
<City>Huntsville</City>
<locationId>3</locationId>
</Table>
<Table>
<State>Alaska</State>
<City>Anchorage</City>
<locationId>6</locationId>
</Table>
<Table>
<State>Alaska</State>
<City>Chignik</City>
<locationId>275</locationId>
</Table>
<Table>
<State>Alaska</State>
<City>Juneau</City>
<locationId>276</locationId>
</Table>
-
-
-
-
-
-
</Country>

My requirement is to show States in a drop-down.So from the code i used the drop-down displays Alabama 2 times and Alaska 3 times and so on...
Here is how my code looks like....

optionItem0 = new Option( response, response, false, false);
myDropDown.options[myDropDown.options.length] = optionItem0;

Here response object gets the State node's text.The above code is placed in a for loop so that every State node's text is added to the drop-down.

I have to check whether the state is already there in the drop-down or not.For this purpose i have to write a for loop and an if statement inside the above for loop.

U have mentioned to check with a boolean.I don't know how it works.Can u explain it and please make sure that the syntax is correct.

Regards,
Satya
May 11 '07 #9
pbmods
5,821 Expert 4TB
U have mentioned to check with a boolean.I don't know how it works.Can u explain it and please make sure that the syntax is correct.
(made another quick change; what is with me and the typos this week?!)

Expand|Select|Wrap|Line Numbers
  1. var present = false;
  2. for(i=0;(i< myDropDown.options.length) && (! present);i++)
  3.     present = (myDropDown.options[i].value == "NewYork");
  4.  
  5. if(! present) {
  6.     //  I'm sure you know what goes here.
  7. }
In this block, we loop through myDropDown.options using a for loop, but in addition to checking to see if i is less than options.length, we also check to see if present is still false (since once we know that the item is already in the list of options, there's no point in continuing to search).

At the end of the loop's execution, if we never found "NewYork", then present will be false, and we know to add the new option. On the other hand, if present is true, then we know that the option already exists, so we can skip it.

For faster execution, I also provide this idea:

Expand|Select|Wrap|Line Numbers
  1. var myOptions = null;  // Declared globally at start of execution.
  2.  
  3. .
  4. .
  5. .
  6.  
  7. function createOptionOrWhateverYouCalledIt(newValue, newText) {
  8. .
  9. .
  10. .
  11. // Load existing options (if we haven't done so already).
  12. if(! myOptions) {
  13.     myOptions = {};
  14.     for(var i = 0; i < myDropDown.options.length; i++)
  15.         myOptions[myDropDown.options[i].value] = true;
  16. }
  17.  
  18. if(! myOptions[newValue]) {
  19.     // Create the new option.
  20.  
  21.     // Cache the new option.
  22.     myOptions[newValue] = true;
  23. }
  24.  
In this block, we create a global variable myOptions which we will use to cache all of the options in myDropDown so that we don't have to keep looping through it.

The first time we try to create an option (inside the aptly-named function createOptionOrWhateverYouCalledIt), the function checks to see if myOptions has been defined. Since it was initialized to null, we create a generic object ('{}'), and then run through myDropDown and populate myOptions. E.g., if myDropDown had three options: (NewYork, Anchorage, Dallas), then myOptions would look like this:

Expand|Select|Wrap|Line Numbers
  1. myOptions = {
  2.     'NewYork': true,
  3.     'Anchorage': true,
  4.     'Dallas': true
  5. };
  6.  
Note that myOptions['NewYork'] === true, whereas myOptions['Indianapolis'] == false (undefined). This becomes important in the next step:

Expand|Select|Wrap|Line Numbers
  1.     if(! myOptions[newValue]) {
  2.  
newValue is the value of the new option. if newValue were 'NewYork', then myOptions['NewYork'] would resolve to true, which we negate to get false, so we don't create a new option.

On the other hand, if newValue were 'Ann Arbor', myOptions['Ann Arbor'] would resolve to undefined, which we negate to get true, so we *do* create the new option.

Expand|Select|Wrap|Line Numbers
  1.     // Cache the new option.
  2.     myOptions[newValue] = true;
  3.  
Once we create the new option, we add it to myOptions so we know about it the next time we try to create an option.

Now so far, this isn't that remarkable, since we had to run through the entire list of options. But watch what happens when we execute it a second time:

Expand|Select|Wrap|Line Numbers
  1. if(! myOptions) {
  2.     myOptions = {};
  3.     for(var i = 0; i < myDropDown.options.length; i++)
  4.         myOptions[myDropDown.options[i].value] = true;
  5. }
Note that since myOptions now is defined (and contains all of the values in myDropDown.options), we don't execute this statement at all!

Instead, we go straight to this block:

Expand|Select|Wrap|Line Numbers
  1. if(! myOptions[newValue]) {
  2.     // Create the new option.
  3.  
  4.     // Cache the new option.
  5.     myOptions[newValue] = true;
  6. }
  7.  
And instead of O(n), we now have O(1) execution time!

(or something like that; I was never very good at computer science o_O)
May 11 '07 #10
(made another quick change; what is with me and the typos this week?!)

Expand|Select|Wrap|Line Numbers
  1. var present = false;
  2. for(i=0;(i< myDropDown.options.length) && (! present);i++)
  3.     present = (myDropDown.options[i].value == "NewYork");
  4.  
  5. if(! present) {
  6.     //  I'm sure you know what goes here.
  7. }
In this block, we loop through myDropDown.options using a for loop, but in addition to checking to see if i is less than options.length, we also check to see if present is still false (since once we know that the item is already in the list of options, there's no point in continuing to search).

At the end of the loop's execution, if we never found "NewYork", then present will be false, and we know to add the new option. On the other hand, if present is true, then we know that the option already exists, so we can skip it.

For faster execution, I also provide this idea:

Expand|Select|Wrap|Line Numbers
  1. var myOptions = null;  // Declared globally at start of execution.
  2.  
  3. .
  4. .
  5. .
  6.  
  7. function createOptionOrWhateverYouCalledIt(newValue, newText) {
  8. .
  9. .
  10. .
  11. // Load existing options (if we haven't done so already).
  12. if(! myOptions) {
  13.     myOptions = {};
  14.     for(var i = 0; i < myDropDown.options.length; i++)
  15.         myOptions[myDropDown.options[i].value] = true;
  16. }
  17.  
  18. if(! myOptions[newValue]) {
  19.     // Create the new option.
  20.  
  21.     // Cache the new option.
  22.     myOptions[newValue] = true;
  23. }
  24.  
In this block, we create a global variable myOptions which we will use to cache all of the options in myDropDown so that we don't have to keep looping through it.

The first time we try to create an option (inside the aptly-named function createOptionOrWhateverYouCalledIt), the function checks to see if myOptions has been defined. Since it was initialized to null, we create a generic object ('{}'), and then run through myDropDown and populate myOptions. E.g., if myDropDown had three options: (NewYork, Anchorage, Dallas), then myOptions would look like this:

Expand|Select|Wrap|Line Numbers
  1. myOptions = {
  2.     'NewYork': true,
  3.     'Anchorage': true,
  4.     'Dallas': true
  5. };
  6.  
Note that myOptions['NewYork'] === true, whereas myOptions['Indianapolis'] == false (undefined). This becomes important in the next step:

Expand|Select|Wrap|Line Numbers
  1.     if(! myOptions[newValue]) {
  2.  
newValue is the value of the new option. if newValue were 'NewYork', then myOptions['NewYork'] would resolve to true, which we negate to get false, so we don't create a new option.

On the other hand, if newValue were 'Ann Arbor', myOptions['Ann Arbor'] would resolve to undefined, which we negate to get true, so we *do* create the new option.

Expand|Select|Wrap|Line Numbers
  1.     // Cache the new option.
  2.     myOptions[newValue] = true;
  3.  
Once we create the new option, we add it to myOptions so we know about it the next time we try to create an option.

Now so far, this isn't that remarkable, since we had to run through the entire list of options. But watch what happens when we execute it a second time:

Expand|Select|Wrap|Line Numbers
  1. if(! myOptions) {
  2.     myOptions = {};
  3.     for(var i = 0; i < myDropDown.options.length; i++)
  4.         myOptions[myDropDown.options[i].value] = true;
  5. }
Note that since myOptions now is defined (and contains all of the values in myDropDown.options), we don't execute this statement at all!

Instead, we go straight to this block:

Expand|Select|Wrap|Line Numbers
  1. if(! myOptions[newValue]) {
  2.     // Create the new option.
  3.  
  4.     // Cache the new option.
  5.     myOptions[newValue] = true;
  6. }
  7.  
And instead of O(n), we now have O(1) execution time!

(or something like that; I was never very good at computer science o_O)
Thanks pbmods,
my problem is solved
Thanks a lot
May 12 '07 #11
pbmods
5,821 Expert 4TB
Thanks pbmods,
my problem is solved
Thanks a lot
We aim to please.
May 12 '07 #12

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Rithish | last post: by
2 posts views Thread by Rob Long | last post: by
6 posts views Thread by artev | last post: by
5 posts views Thread by Andy Chambers | last post: by
1 post views Thread by CARIGAR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.