Question

我有这个选择颜色：

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>

我想为用于隐藏选项的4行制作for循环javascript，其值为<= 0

JS：

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

我尝试为上面的代码进行for循环。

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);
        }
    }
}

您可以在jsfiddle

上看到它

Answer 1

当您没有定义时（{至少不在您向我们展示的代码中），您引用了color.length和color[$j]。您的意思是使用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);
        }
    }
 }

此代码也没有做（我认为）您尝试实现的内容，因为第二个循环只检查$x的当前值，因此最终会隐藏所有元素，而不仅仅是正确的选项。

这样的事情更可取：

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();
    }
}

正如@dfsq已经提到的那样，为此使用对象要好得多，因为颜色及其值是相关的数据。除非你有充分的理由这样做，否则使用2个独立的数组来保存数据并不理想。

Answer 2

您混淆了索引变量，它应该是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);
        }
    }
}

演示： https://jsfiddle.net/qu8ekvhk/3/

使用替代（更方便）数据结构的另一个更简单的选项：

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

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

演示： https://jsfiddle.net/qu8ekvhk/1/

另外，正如评论中所指出的，如果你支持IE，那么你不能在这个浏览器中隐藏选项，你必须remove()或者使用其中一个解决方法。

for循环里面的另一个for循环javascript（jquery）

2 个答案: