2

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

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

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

小提琴在这里。

4

4 回答 4

0

你可以试试这个

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

演示。

于 2013-09-15T21:47:36.313 回答
0

很多答案都显示了 flag 方法，这是完全有效的，但只是为了展示一种不同的方法：

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

这需要所有选项元素并将它们映射到一个数组中，然后检查该数组是否包含“选择...”。

于 2013-09-15T21:48:35.217 回答
0

稍作修改的版本@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()方法可以接受一个布尔值，告诉它隐藏或显示。

于 2013-09-15T21:40:58.407 回答
0

你可以这样做：

 $(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 示例

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

 $(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':'');
     });
 });
于 2013-09-15T21:12:24.570 回答