如何隐藏html表单选择选项？

我有一个非常简单的表单，我想隐藏选择选项，当另一个选择字段精炼它。

目前我已经尝试过dispay: none作为我的选项的内联样式，但它不会隐藏它。

我正在使用chrome，这需要适用于所有浏览器。 任何人都可以解决一些问题，因为我似乎无法在谷歌上找到太多。

请在这里看到我的问题… http://jsfiddle.net/3vPgY/5/

在这里我的当前代码……

 
  Please refine... Green Blue Red   Please select Show only if Green selected Show only if Green selected Show only if Green selected Show only if Blue selected Show only if Blue selected Show only if Blue selected Show only if Red selected Show only if Red selected Show only if Red selected   

我的jquery脚本可以过滤第二个下拉列表…

 $('#refine').change(function () { var refine = $('option:selected', this).val().replace(/ /g, "-"); if (refine != 0) { $('#everything').removeAttr('disabled'); $('#everything option:not(.default)').css('display', 'none'); $('#everything .' + refine).css('display', 'block'); } else { $('#everything').attr('disabled', 'disabled'); $('#everything option:not(.default)').css('display', 'none'); } }); 

如您所见，我只想隐藏选项，而不是删除。 如果第一个下拉选项发生变化，我可以以某种方式将它们带回来。

任何建议都会有所帮助 – 或者可能是一种解决方法。

谢谢

http://jsfiddle.net/3vPgY/5/

Answer 1

我认为实现您的想法的更简单方法是使用三个不同的下拉列表代替第二个下拉列表。 然后，第一个下拉菜单可以根据它的值选择显示哪一个。

更简单。

通过这种更改，您可以简单地进行回调：

 $('#refine').change(function () { var refine = $('option:selected', this).val().replace(/ /g, "-"); $('.refined').removeClass('hidden').addClass('hidden'); $('#'+refine).removeClass('hidden').removeAttr('disabled'); }); 

编辑：我分叉你的小提琴 （也许编辑你的原作？）。 它有我建议的变化。

Answer 2

最后我使用了jquery clone ，它似乎可以解决问题。

http://jsfiddle.net/3vPgY/10/

 var everything = $('#everything').clone(true); $('#refine').change(function () { var selectColour = $('option:selected', this).val().replace(/ /g, "-"); if (refine != 0) { var everythingRefined = everything.clone(true).find('.default,.'+selectColour); $('#everything').removeAttr('disabled'); $('#everything').empty().append(everythingRefined); } else { $('#everything').attr('disabled', 'disabled'); } }); 

Answer 3

您无法隐藏/删除单个选项，仅应用对其disabled的属性。 它们会显得灰暗但不会被选中。

您可以逐步保留一个变量对象，该对象具有select的默认配置的所有数据。 然后，当您需要删除选项时，您仍然可以知道在所有条件对齐时需要进入选择的内容。

Answer 4

这不是最好的做事方式，最好动态构建您的选择。 但是，如果必须这样做，请使用以下代码：

  $('#refine').change(function () { var selected = $(this).val(); $("#everything option").wrap(""); $("#everything option." + selected).unwrap(); $("#everything").attr('disabled',false); }); 

我在这里分叉： http ： //jsfiddle.net/AyX9Q/

请记住，代码很小，只是为了向您展示如何在跨度中包装选项并隐藏它们。 如果您在第一个选择中恢复“请选择”，它不会显示所有选项的逻辑。