CODEWITHSUNDEEP
javascriptjquery
adi radian
adi radian

Reputation: 43

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/

Upvotes: 2

Views: 16914

Answers (3)

aqwan
aqwan

Reputation: 500

Using a check for "" did not work for me, I had to check for null to test whether drop-down was empty or cleared - in order to toggle on/off a related button :

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

  }

Upvotes: 4

Deep
Deep

Reputation: 9794

updated fiddle : https://jsfiddle.net/f4mfkh6t/6/

you need to check the value of select2 on page load and on chnage both places.

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

});
});

Upvotes: 3

Ehsan
Ehsan

Reputation: 12959

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>

Upvotes: 2

Related Questions