for loop inside another for loop javascript (jquery)

Question

I have this select options color:

HTML:

<select id="selected_color" name="inkColor">
    <option disabled selected>select color:</option>
    <option id="red">Red</option>
    <option id="blue">Blue</option>
    <option id="green">Green</option>
    <option id="black">Black</option>
</select>

I want to make a for loop javascript for this 4 lines that used for hide option that have value <= 0

JS:

$('option#red').attr("hidden", true);
$('option#blue').attr("hidden", true);
$('option#green').attr("hidden", true);
$('option#black').attr("hidden", true);

I try to make for loop for above code.

JS:

//TO HIDE SELECT COLOR THAT DOSE NOT HAVE A VALUE
//color values
red= -1;
blue=9;
green= -4;
black=3;

//red and green must be hide because it's less than 0 

color_value = [red,blue,green,black];
for(var $x=0 ; $x < color_value.length ; $x++){   //first for loop
    color_str=['red','blue','green','black'];
    for(var $j=0 ; $j < color.length ; $j++){     //second for loop
        ids = "option#"+color[$j];
        if (color_value[$x] <= 0){
            $(ids).attr("hidden", true);
        }
    }
}

You can see it on jsfiddle

Here's the thing, you can't reliably hide option elements cross-browser, so you might as well give up. You have to actually remove the options from the DOM. — adeneo
– adeneo, Commented Mar 2, 2015 at 15:35
Do you set values in JS as I don't see values in your markup? — lshettyl
– lshettyl, Commented Mar 2, 2015 at 15:36

dfsq · Accepted Answer · 2015-03-02 16:01:01Z

1

You confused indexes variables, it should be color_value[$j]:

for(var $x=0 ; $x < color_value.length ; $x++){   //first for loop
    for(var $j=0 ; $j < color_str.length ; $j++){     //second for loop
        ids = "option#"+color_str[$j];
        if (color_value[$j] <= 0){
            $(ids).attr("hidden", true);
        }
    }
}

Demo: https://jsfiddle.net/qu8ekvhk/3/

One more simpler option with alternative (more convenient) data structure:

var colors = {
    red: -1,
    blue: 9,
    green: -4,
    black: 3
};

$('#selected_color option').filter(function() {
    return colors[this.id] < 0;
}).hide();

Demo: https://jsfiddle.net/qu8ekvhk/1/

Also, as pointed in comments if you support IE, then you can't just hide option in this browser, you will have to either remove() them or use one of the many workarounds.

edited Mar 2, 2015 at 16:01

answered Mar 2, 2015 at 15:44

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

charlietfl Over a year ago

try it in IE, hide() will fail...not supported

dfsq Over a year ago

Hm, interesting, didn't know it about. Let me check.

charlietfl Over a year ago

will also fail in safari I believe

talalalshehri Over a year ago

thanks for help :) . About IE if I use for loop ( first demo ) , Is IE support it or not.

dfsq Over a year ago

No. The problem is that IE can't hide option element in select. So you can delete option instead $(ids).remove();.

Community · Accepted Answer · 2017-05-23 12:28:23Z

1

You're referencing color.length and color[$j] when you don't have this defined (at least not in the code you showed us). Did you mean to use color_str?

...

for(var $x=0 ; $x < color_value.length ; $x++)   //first for loop
{  
    color_str=['red','blue','green','black'];
    for(var $j=0 ; $j < color_str.length ; $j++)     //second for loop
    {
        ids = "option#"+color_str[$j];

        if (color_value[$x] <= 0)
        {
            $(ids).attr("hidden", true);
        }
    }
 }

This code also isn't doing what (I think) you're trying to achieve, as the second loop is only checking the current value of $x, so will end up hiding all elements if the condition is met, not just the correct option.

Something like this is preferable:

var red   = -1,
    blue  = 9,
    green = -4,
    black = 3;

var color_value = [red, blue, green, black];
var color_str = ['red', 'blue', 'green', 'black'];

for (var $x = 0; $x < color_value.length; $x ++)
{
    var id = "option#" + color_str[$x];

    if (color_value[$x] <= 0) {
        $(id).hide();
    }
}

As @dfsq has already mentioned, it'd be much better to use objects for this, as the colour and its value are related pieces of data. Unless you have a good reason for doing so, using 2 separate arrays to hold the data is not ideal.

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Mar 2, 2015 at 15:39

rmorrin

2,5251 gold badge17 silver badges18 bronze badges

1 Comment

charlietfl Over a year ago

what do you expect attr('hidden') to do? Can't hide option tag cross browser and hidden doesn't do anything anyway

Collectives™ on Stack Overflow

for loop inside another for loop javascript (jquery)

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related