Question

我有一个按钮，它将获得我们在select2中选择的值，如果客户端仍未选择select 2中的选项之一，我需要隐藏该按钮。怎么弄？

像我这样的剧本

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

但是使用这段代码，按钮仍然显示，即使我没有在select2中选择任何内容。你们有什么问题可以告诉我们什么？

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

Answer 1

这有助于您：

＆＃13;

<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>

＆＃13;

最终守则：

＆＃13;

<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>

＆＃13;

Answer 2

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

你需要在页面加载和chnage这两个地方检查select2的值。

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

});
});

Answer 3

使用支票＆＃34;＆＃34;对我不起作用，我必须检查null以测试下拉列表是空的还是清除 - 以便打开/关闭相关按钮：

  $("#my_drop_down").change(function () {

    if($(this).val() == null) {
          $('#import_btn').addClass('disabled');
          $('#import_btn').prop("disabled", true);
    } 
    else {
          $('#import_btn').removeClass('disabled');
          $('#import_btn').prop("disabled", false);
     }

  }

检查值select2是否为空

3 个答案: