Javascript 如何根据JQuery选择的另一个选项隐藏\显示选项的特定值？

我有如下html选择表单：

<label>Num:</label>
<select id="id_num">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
    <option value='car'>car</option>
    <option value='bike'>bike</option>
    <option value='house'>house</option>
    <option value='money'>money</option>
    <option value='plane'>plane</option>
    <option value='wife'>wife</option>
</select>

Num：
1.
2.
3.
全部的
选择：
汽车
自行车
房子
钱
飞机
妻子

在我的例子中，我需要这样做，如果我在第一个选择表单（#id_num）中选择“1”，那么下一个选择表单（#id_choices）应该只显示“car”和“bike”选项，如果我选择“2”，则#id_选项应该只显示“house”和“money”，以及其他。。但如果我选择“全部”，则应显示#id#u选项上的每个选项

如何使用jQuery解决该问题？

您可以使用jQuery筛选您的选项，并使它们

显示：无根据项目在数组中的出现情况

请查看以下代码：


$（函数（）{
$（'id_num'）。关于（'change'，函数（e）{
if（$（this）.val（）==1）{
var arr=['汽车'，'自行车']；
$（'id#u选项'）。每个（函数（i）{
if（$.inArray（$（this.attr（'value'），arr）=-1）{
$（this.css（'display'，'none'）；
}否则{
$（this.css（'display'，'inline block'）；
}
});
}else if（$（this）.val（）==2）{
var arr=[‘房子’、‘钱’]；
$（'id#u选项'）。每个（函数（i）{
if（$.inArray（$（this.attr（'value'），arr）=-1）{
$（this.css（'display'，'none'）；
}否则{
$（this.css（'display'，'inline block'）；
}
});
}else if（$（this）.val（）==3）{
var arr=['平面'，'妻子']；
$（'id#u选项'）。每个（函数（i）{
if（$.inArray（$（this.attr（'value'），arr）=-1）{
$（this.css（'display'，'none'）；
}否则{
$（this.css（'display'，'inline block'）；
}
});
}否则{
$（'id#u选项'）。每个（函数（i）{
$（this.css（'display'，'inline block'）；
});
}
})
});

号码：
挑选
1.
2.
3.
全部的
选择：
汽车
自行车
房子
钱
飞机
妻子
使用
.prop（）
而不是使用
disabled
属性（如Saumya的回答）添加值为
none
的属性
显示
，以防您希望它们完全不可见，而不仅仅是禁用/灰显
，可能有更好的方法，但这确实有效。。还可以向任何其他元素添加隐藏/显示类


$（document）.ready（函数（）{$（'#id_num'）。on（'change'，change）}）；
函数更改（）{
$（'#id_choices>option'）.hide（）；
$（$（this.find（'：selected'）.attr（'clssval'））.show（）；
}
.sel{display:none；}
.num1{display:block；}

号码：
1.
2.
3.
全部的
选择：
汽车
自行车
房子
钱
飞机
妻子
您可以在页面加载时运行一次函数，然后每次
\id\u num
更改时，删除所有可见的
\id\u选项（使用
删除（）
），然后只将相关选项重新添加到
\id\u选项中（使用
附加（）
）以替换它们

工作示例：


$（文档）.ready（函数（）{
var car=‘car’；
var bike=‘bike’；
var house=‘house’；
var money=‘money’；
变量平面='平面'；
var妻子=‘妻子’；
功能选项1（）{
$（“#id_选项”）。追加（car）；
$（'id_choices'）。附加（bike）；
}
功能选项2（）{
$（'id_choices'）。附加（house）；
$（'id_choices'）。追加（货币）；
}
功能选项3（）{
$（'#id_选项'）。追加（平面）；
$（'id_choices'）。附加（妻子）；
}
函数displayOptions（）{
$（'#id_选项'）。删除（）；
开关（$（'#id_num option:selected'）。text（）{
案例（'1'）：选项1（）；中断；
案例（'2'）：选项2（）；中断；
案例（'3'）：选项3（）；中断；
大小写（'all'）：选项1（）；选项2（）；选项3（）；中断；
}
}
$（'#id_num'）.change（function（）{displayOptions（）；}）；
显示选项（）；
});

号码：
1.
2.
3.
全部的
选择：
汽车
自行车
房子
钱
飞机
妻子
@Faizalprbw-如果您认为此答案正确且有帮助，请接受并投票表决此答案，因为它激励我回答其他类似问题，并帮助其他人快速找到正确答案！我们可以用show\hide代替css显示吗？非常感谢，这可以用于其他情况，但在我的情况下，我无法添加clssval，因为我的模板中使用了django表单。您尝试过吗？我知道大多数语言。即使是角度也允许添加属性，是的，我们可以，但是我必须手动将这个{form.num}拆分成html格式，就像上面的例子一样。我认为根据下面的答案，我最好使用原生javascript。。在我看来，在下面的jquery示例中，最好避免在javascript变量中初始化html脚本。。非常感谢你，如果我能多加一条正确的答案就好了。。