adi radian adi radian - 5 months ago 72
jQuery Question

Check if value select2 is null

I have a button that will get value of the what we choose in select2, I need to hide that button if client still not choose one of option in select 2.
how to get that?

my script like this

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


But with this code, the button still show up, even I didn't choose anything in select2.can you guys tell what is wrong?

heres my jsfiddle
https://jsfiddle.net/f4mfkh6t/1/

Answer

This help you :

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

Final Code :

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

Comments