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

Question

我有一个要求，必须隐藏链接，直到所有下拉菜单的默认状态“选择...”发生更改。该链接仅应在所有三个下拉菜单不再包含选择后才显示，它也如果重新选择默认选择...，则应隐藏链接。

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

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