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

[satyanarayana49]

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.o ptions[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<optio ns.length;i++)
{
if(myDropDown.o ptions[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.opti ons.text == "NewYork"

Sorry for elaboration.... Thanks for any replies

-Satya

[l1k3kah]

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.formn ame.selectname. options[index].value=="the value needed")
{
}

something like that...

Sorry can't help that much!
God Bless You!

[satyanarayana49]

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.

[acoder]

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.o ptions[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<optio ns.length;i++)
{
if(myDropDown.o ptions[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.opti ons.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.

[pbmods]

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.:

var present = true;
for(i=0;(i<options.length) && present;i++)
    present = (myDropDown.options[i].value == "NewYork");

if(! present) {
    //  I'm sure you know what goes here.
}

Now on the other hand, you could do something like this:

var myOptions = null;  // Declared globally at start of execution.

.
.
.

function createOptionOrWhateverYouCalledIt(newValue, newText) {
.
.
.
// Load existing options (if we haven't done so already).
if(! myOptions)
    for(var i = 0; i < myDropDown.options.length; i++)
        myOptions[myDropDown.options[i].value] = true;
}

if(! myOptions[newValue]) {
    // Create the new option.

    // Cache the new option.
    myOptions[newValue] = true;
}

[satyanarayana49]

To speed things up a little bit, you can break out of the loop once you find the matching value. I.e.:

var present = true;
for(i=0;(i<options.length) && present;i++)
    present = (myDropDown.options[i].value == "NewYork");

if(! present) {
    //  I'm sure you know what goes here.
}

Now on the other hand, you could do something like this:

var myOptions = null;  // Declared globally at start of execution.

.
.
.

function createOptionOrWhateverYouCalledIt(newValue, newText) {
.
.
.
// Load existing options (if we haven't done so already).
if(! myOptions)
    for(var i = 0; i < myDropDown.options.length; i++)
        myOptions[myDropDown.options[i].value] = true;
}

if(! myOptions[newValue]) {
    // Create the new option.

    // Cache the new option.
    myOptions[newValue] = true;
}

Thanks pbmods,
I understand the code u have mentioned.....b ut 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

[pbmods]

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.

[pbmods]

can u correct the syntax and post...

Hm. Now that I'm looking at it, I meant to put this instead:

var present = false;
for(i=0;(i<options.length) && (! present);i++)
    present = (myDropDown.options[i].value == "NewYork");

if(! present) {
    //  I'm sure you know what goes here.
}

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:

if(! myOptions)
    myOptions = {};
    for(var i = 0; i < myDropDown.options.length; i++)
        myOptions[myDropDown.options[i].value] = true;
}

[satyanarayana49]

Hm. Now that I'm looking at it, I meant to put this instead:

var present = false;
for(i=0;(i<options.length) && (! present);i++)
    present = (myDropDown.options[i].value == "NewYork");

if(! present) {
    //  I'm sure you know what goes here.
}

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:

if(! myOptions)
    myOptions = {};
    for(var i = 0; i < myDropDown.options.length; i++)
        myOptions[myDropDown.options[i].value] = true;
}

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>Alabam a</State>
<City>Birmingha m</City>
<locationId>2 </locationId>
</Table>
<Table>
<State>Alabam a</State>
<City>Huntsvill e</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.opti ons[myDropDown.opti ons.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

[pbmods]

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?!)

var present = false;
for(i=0;(i< myDropDown.options.length) && (! present);i++)
    present = (myDropDown.options[i].value == "NewYork");

if(! present) {
    //  I'm sure you know what goes here.
}

In this block, we loop through myDropDown.opti ons 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:

var myOptions = null;  // Declared globally at start of execution.

.
.
.

function createOptionOrWhateverYouCalledIt(newValue, newText) {
.
.
.
// Load existing options (if we haven't done so already).
if(! myOptions) {
    myOptions = {};
    for(var i = 0; i < myDropDown.options.length; i++)
        myOptions[myDropDown.options[i].value] = true;
}

if(! myOptions[newValue]) {
    // Create the new option.

    // Cache the new option.
    myOptions[newValue] = true;
}

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 createOptionOrW hateverYouCalle dIt), 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:

myOptions = {
    'NewYork': true,
    'Anchorage': true,
    'Dallas': true
};

Note that myOptions['NewYork'] === true, whereas myOptions['Indianapolis'] == false (undefined). This becomes important in the next step:

    if(! myOptions[newValue]) {

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.

    // Cache the new option.
    myOptions[newValue] = true;

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:

if(! myOptions) {
    myOptions = {};
    for(var i = 0; i < myDropDown.options.length; i++)
        myOptions[myDropDown.options[i].value] = true;
}

Note that since myOptions now is defined (and contains all of the values in myDropDown.opti ons), we don't execute this statement at all!

Instead, we go straight to this block:

if(! myOptions[newValue]) {
    // Create the new option.

    // Cache the new option.
    myOptions[newValue] = true;
}

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)

[satyanarayana49]

(made another quick change; what is with me and the typos this week?!)

var present = false;
for(i=0;(i< myDropDown.options.length) && (! present);i++)
    present = (myDropDown.options[i].value == "NewYork");

if(! present) {
    //  I'm sure you know what goes here.
}

In this block, we loop through myDropDown.opti ons 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:

var myOptions = null;  // Declared globally at start of execution.

.
.
.

function createOptionOrWhateverYouCalledIt(newValue, newText) {
.
.
.
// Load existing options (if we haven't done so already).
if(! myOptions) {
    myOptions = {};
    for(var i = 0; i < myDropDown.options.length; i++)
        myOptions[myDropDown.options[i].value] = true;
}

if(! myOptions[newValue]) {
    // Create the new option.

    // Cache the new option.
    myOptions[newValue] = true;
}

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 createOptionOrW hateverYouCalle dIt), 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:

myOptions = {
    'NewYork': true,
    'Anchorage': true,
    'Dallas': true
};

Note that myOptions['NewYork'] === true, whereas myOptions['Indianapolis'] == false (undefined). This becomes important in the next step:

    if(! myOptions[newValue]) {

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.

    // Cache the new option.
    myOptions[newValue] = true;

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:

if(! myOptions) {
    myOptions = {};
    for(var i = 0; i < myDropDown.options.length; i++)
        myOptions[myDropDown.options[i].value] = true;
}

Note that since myOptions now is defined (and contains all of the values in myDropDown.opti ons), we don't execute this statement at all!

Instead, we go straight to this block:

if(! myOptions[newValue]) {
    // Create the new option.

    // Cache the new option.
    myOptions[newValue] = true;
}

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

[pbmods]

Thanks pbmods,
my problem is solved
Thanks a lot

We aim to please.