2016-07-04 106 views
-1

我有一个按钮,它将获得我们在select2中选择的值,如果客户端仍然没有在选择2中选择其中一个选项,我需要隐藏该按钮。 如何获取?检查值select2是否为空

我喜欢这个

if ($('.deggre[select]').val() = ''){ 
     $('dropdownMenu1').css({"display": "none"}); 
    } 

但有了这个代码脚本,该按钮依然显示出来,即使我没有选择任何东西select2.can你们知道什么是错的?

我的继承人的jsfiddle https://jsfiddle.net/f4mfkh6t/1/

+0

使用'==='而不是'='。 – gcampbell

回答

0

这可以帮助您:

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <select class="deggre" style="width: 100%"> 
 
     <option value=""></option> 
 
     <option value="Alabama">Alabama</option> 
 
     <option value="Wyoming">Wyoming</option> 
 
     </select> 
 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" style="display:none"> 
 
     <!-- the name of button is the value of what we choose in first select2 -->Alabama 
 
      <span class="glyphicon glyphicon-remove"></span> 
 
     </button> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
      $(document).ready(function(){ 
 
       $(".deggre").change(function(){ 
 
        if($(this).val() == "") 
 
         $('#dropdownMenu1').css({"display": "none"}); 
 
        else 
 
         $('#dropdownMenu1').css({"display": "block"}); 
 
       }) 
 
      }) 
 
     </script> 
 
    </body> 
 
</html>

终极密码:

<html> 
 
    <head> 
 
     <style> 
 
      buttonResultarea button span{ 
 
      margin-left:5px 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     
 
     <div class="selectContainer container"> 
 
    <!-- when client choose the dropdown, the value of choosen go to buttonResultarea --> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
     <select class="deggre" style="width: 20%"> 
 
     <option value=""></option> 
 
     <option value="Alabama">Alabama</option> 
 
     <option value="Wyoming">Wyoming</option> 
 
     </select> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <select class="position" style="width: 20%"> 
 
     <option value=""></option> 
 
     <option value="lorem">lorem</option> 
 
     <option value="ipsum">ipsum</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="buttonResultarea container"> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" style="display:none"> 
 
    <!-- the name of button is the value of what we choose in first select2 -->Alabama 
 
     <span class="glyphicon glyphicon-remove"></span> 
 
    </button> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" style="display:none"> 
 
    <!-- the name of button is the value of what we choose in second select2 -->ipsum 
 
     <span class="glyphicon glyphicon-remove"></span> 
 
    </button> 
 
    </div> 
 
    </div> 
 
</div> 
 
     
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
      $(document).ready(function(){ 
 
       $(".deggre").change(function(){ 
 
        if($(this).val() == "") 
 
         $('#dropdownMenu1').css({"display": "none"}); 
 
        else 
 
         $('#dropdownMenu1').css({"display": "block"}); 
 
       }) 
 
       
 
       $(".position").change(function(){ 
 
        if($(this).val() == "") 
 
         $('#dropdownMenu2').css({"display": "none"}); 
 
        else 
 
         $('#dropdownMenu2').css({"display": "block"}); 
 
       }) 
 
      }) 
 
     </script> 
 
    </body> 
 
</html>

+0

先生,我尝试,但是当我选择select2我的按钮仍然存在。 https://jsfiddle.net/f4mfkh6t/3/ –

+0

@adiradian我更新我的答案,看到它,如果你帮助你标记它。 – Ehsan

+0

https://jsfiddle.net/f4mfkh6t/5/它没有工作先生 –

0

更新小提琴:https://jsfiddle.net/f4mfkh6t/6/

你需要检查在页面加载和chnage两地选择2的值。

$(document).ready(function() { 


if ($('.deggre').val() == ""){ 
    $('#dropdownMenu1').css({"display": "none"}); 
} 

if ($('.position').val() == ""){ 

    $('#dropdownMenu2').css({"display": "none"}); 
} 




$('.deggre').on('change', function() { 

    if ($('.deggre').val() != ""){ 
    $('#dropdownMenu1').css({"display": "block"}); 
    } 


}); 
$('.position').on('change', function() { 

if ($('.position').val() != ""){ 

    $('#dropdownMenu2').css({"display": "block"}); 
} 

}); 
});