Question

我有一个要求，我必须隐藏一个链接，直到所有下拉菜单的默认状态为'select ...'后，链接应该只显示所有三个下拉菜单后不再包含select，它也是如果默认选择，则应该隐藏链接...重新选择。

这是一个小提示，向您展示我所拥有的仅适用于第一个选项，但如果再次选择选择则不起作用，也忽略其他下拉菜单。

$(document).ready(function() {
    $(".BuyButton").hide()
    $('.Option').change(function() {
        var str = $('.Option option:selected').text(); 
        if (str == "Select...") {
            $('.BuyButton').hide();
        } else {
            $('.BuyButton').show();
        }
    });   
});

A Fiddle Here.

Answer 1

您可以这样做：

 $(document).ready(function () {
     $(".BuyButton").hide()
     $('.Option').change(function () {
         $(".BuyButton").css('display', ($('.Option:eq(0) option:selected').text() != "Select..." && $('.Option:eq(1) option:selected').text() != "Select..." && $('.Option:eq(2) option:selected').text() != "Select...") ? '' : 'none');
     });
 });

<强> jsFiddle example

如果你有一个未知数量的选择，那么你可以使用它：

 $(document).ready(function () {
     $(".BuyButton").hide()
     $('.Option').change(function () {
         var flag = false;
         $('.Option').each(function(){
             if($('option:selected',this).text()=="Select...") flag=true;;
         });
         $(".BuyButton").css('display',flag ? 'none':'');
     });
 });

Answer 2

稍微修改过的版本@sergio回复。
如果默认选择选项没有值，那将是最好的。

<option selected="selected" value>Select...</option>

如果不可行，请将if语句行更改为

if ($(this).find(':selected').text() == 'Select...')

，这将是相同的

$(function () {
    $(".BuyButton").hide();

    $('select').change(function () {
        var showButton = true;
        $('select').each(function () {
            if (!$(this).val()) {
                showButton = false;
            }
        });
        $(".BuyButton").toggle(showButton);
    });
});

jsfiddle

这是发生了什么。

当某些内容发生变化时，假设我们将按钮按钮的方式，除非出现问题查看所有选择。
如果其中一个没有val（!使其成为not语句）更改标志以不显示该按钮。

jQuery的.toggle()方法可以采用一个布尔值来告诉它隐藏或显示。

Answer 3

你可以试试这个

$('.Option').change(function() {
    $('.BuyButton').css('display', function(){
       var o = $('.Option').filter(function(){ return this.selectedIndex == 0 });
       return o.length ? 'none' : '';
    });
});

DEMO.

Answer 4

很多答案都显示了标志方法，这完全有效，但只是为了表明不同的方法：

 $(document).ready(function () {
     $(".BuyButton").hide()
     $('.Option').change(function () {
         $(".BuyButton").css('display', ($('.Option option:selected').map(function (index, domElement) {return $(domElement).text();}).get().indexOf("Select...") != -1 ? 'none' : ''));
     });
 });

这将获取所有选项元素并将它们映射到数组中，然后检查数组是否包含“Select ...”。

Jquery保持链接隐藏，直到所有下拉列表都已更改

4 个答案: