Javascript jQuery在表单中显示一个选项

Javascript jQuery在表单中显示一个选项,javascript,jquery,html,Javascript,Jquery,Html,我想在表单的选项中不显示任何内容 HTML: 我的if声明中有一个问题,但我不知道我的问题在哪里 有人能帮我吗 谢谢。这是因为if语句中的上下文此未引用option元素。正确的方法是查找属性值等于top-10-villen-de的元素以及.hide(): 仅供参考,选项元素的隐藏不起作用。一个很好的解决方法是通过将其disabled属性设置为true来禁用该选项。这是因为if语句中的context此未引用option元素。正确的方法是查找属性值等于top-10-villen-de的元素以及.hi

我想在表单的选项中不显示任何内容

HTML:

我的if声明中有一个问题,但我不知道我的问题在哪里

有人能帮我吗


谢谢。

这是因为if语句中的上下文
未引用option元素。正确的方法是查找属性值等于
top-10-villen-de
的元素以及
.hide()


仅供参考,选项元素的隐藏不起作用。一个很好的解决方法是通过将其disabled属性设置为true来禁用该选项。

这是因为if语句中的context
未引用option元素。正确的方法是查找属性值等于
top-10-villen-de
的元素以及
.hide()


仅供参考,选项元素的隐藏不起作用。一个很好的解决方法是通过将选项的disabled属性设置为true来禁用该选项。

当该值为
top-10-villen-de

jQuery( "select" ).change(function() {
  if(jQuery(this).val() == 'top-10-villen-de'){
    jQuery(this).find("option[value='top-10-villen-de']").css('display', 'none');
  }
});
这是小提琴


当值为
top-10-villen-de

jQuery( "select" ).change(function() {
  if(jQuery(this).val() == 'top-10-villen-de'){
    jQuery(this).find("option[value='top-10-villen-de']").css('display', 'none');
  }
});
这是小提琴


隐藏下拉选项与所有浏览器不兼容

我有更好的选择。
wrap
将选项包装到span中,并在需要时将其取回
unwrap


小提琴链接:

隐藏下拉选项与所有浏览器不兼容

我有更好的选择。
wrap
将选项包装到span中,并在需要时将其取回
unwrap


小提琴链接:

您使用了错误的请参见此示例了解范围

上面的例子给出了这两者之间的区别。 1.这是Jquery之外的。 2.它位于jquery函数内部

  • 正如您在示例中看到的,第一个控制台即console.log(this)将返回窗口对象
  • 二,$(这个)在点击功能中会给你不同的值,它与你的按钮相关,它会给你按钮的范围

    你也可以使用

    jQuery('option').find('.level-0').css('display','none') 如果你知道期权的种类

    HTML



    您使用了错误的请参见此示例了解范围

    上面的例子给出了这两者之间的区别。 1.这是Jquery之外的。 2.它位于jquery函数内部

  • 正如您在示例中看到的,第一个控制台即console.log(this)将返回窗口对象
  • 二,$(这个)在点击功能中会给你不同的值,它与你的按钮相关,它会给你按钮的范围

    你也可以使用

    jQuery('option').find('.level-0').css('display','none') 如果你知道期权的种类

    HTML



    在jQuery中,只要DOM中有多个元素,那么要访问所有元素,就必须使用
    $('selector')。每个(函数(index,Obj){})

    使用此代码隐藏所需的选项

    $('#temp').find('option').each(function(index,Obj){
    if($(this).attr('value')=='2')
    $(this).css('display', 'none');
    })
    

    在jQuery中,只要DOM中有多个元素,那么要访问所有元素,就必须使用
    $('selector')。每个(函数(索引,Obj){})

    使用此代码隐藏所需的选项

    $('#temp').find('option').each(function(index,Obj){
    if($(this).attr('value')=='2')
    $(this).css('display', 'none');
    })
    

    为什么不将
    显示:无
    添加到CSS中的类中?隐藏选项元素既不是跨浏览器兼容的ternates&@Arun p Johny-尤其是在Mobile中。为什么不将
    显示:无
    添加到CSS中的类中?隐藏选项元素也不是跨浏览器兼容的ternates&&@Arun P Johny-尤其是在移动领域。你很清楚它不像我在你之前的回答中看到的那样具有跨浏览器兼容性,那么你为什么不合并它。@Satpal:哦,我记得。但是现在人们很少考虑IE的兼容性。我仍然会用备选方案更新答案。你很清楚,正如我在你以前的答案中看到的那样,它不兼容跨浏览器,那么你为什么不合并它。@Satpal:哦,我记得。但是现在人们很少考虑IE的兼容性。我仍将使用替换项更新答案。这将隐藏整个
    select
    。这将隐藏整个
    select
    。感谢提供有关浏览器兼容性的信息。你的工作很好。祝你今天过得愉快。@cgee:好像不适合我。另外,在span中包装option元素会导致无效的html。感谢提供有关浏览器兼容性的信息。你的工作很好。祝你今天过得愉快。@cgee:好像不适合我。在span中包装option元素也会导致无效的html。
    <button>option 1</button>
    <button>option 2</button>
    <select>
        <option class="level-0" value="top-10-villen-de">Top-10-Villen</option>
        <option class="level-1" value="top-1">Top-20</option>
    </select>
    
    console.log(this)
    $('button').click(function () {
    
        if ($(this).text() === "option 1") {
            if (jQuery('option').attr('value') == 'top-10-villen-de') {
                console.log('inside')
                console.log(jQuery('option[class="level-0"]'))
                jQuery('option[class="level-0"]').css('display', 'none');
            }
    
        } else {
    
            jQuery('option[class="level-0"]').toggle()
        }
    
    })
    
    $('#temp').find('option').each(function(index,Obj){
    if($(this).attr('value')=='2')
    $(this).css('display', 'none');
    })