CODEWITHSUNDEEP
jqueryhtml
Abdelkader Benkhaled
Abdelkader Benkhaled

Reputation: 39

hide textarea, div#id, div with class depending dropdown select

How can I hide a DIV or anything else (with class or ID) depending to drop-down selection using jQuery?

For example:

<div id="example">
   <select>
      <option vlaue="1">paris</option>
      <option vlaue="2">new yourk</option>
      <option vlaue="3">oslo</option>
   <select>

   <div class="abc">hello</div>
   <div id="xxx">i'm happy</div>
</div>

If I selected "paris" the div with id=xxx must disappear. How can I do that?

Upvotes: 0

Views: 108

Answers (3)

m ba
m ba

Reputation: 134

data-hide attribute have css-path of element to hide.

All related elements (data-hide attributes inside select) will be shown expect selected one.

$("select").on("change", function () {
  $(this).find(">option[data-hide]").each(function () {
    $($(this).data('hide')).show();
  });
  if (typeof $(this).find(':selected').data("hide") !== "undefined") {
    $($(this).find(':selected').data("hide")).hide();
  }
}).trigger("change")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="exemple">
<select>
<option vlaue="1">paris</option>
<option vlaue="2" data-hide="#xxx">new yourk</option>
<option vlaue="3" data-hide="#xxx2">oslo</option>
<select>

<div class="abc">hello</div>
<div id="xxx">i'm happy</div>
<div id="xxx2">i'm normal</div>

</div>

Upvotes: 0

Chayan
Chayan

Reputation: 614

You have some typo in value and div closing. After fixing those you can code like following.

$(document).on('change','select',function(e){
	if($("option:selected").val() == 1){
    $('.abc').hide();
  }else{
    $('.abc').show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="exemple">
<select>
<option value="1">paris</option>
<option value="2">new yourk</option>
<option value="3">oslo</option>
<select>

<div class="abc">hello</div>
<div id="xxx">i'm happy</div>

</div>

Upvotes: 0

Osama
Osama

Reputation: 3040

Use change event for your select then with if statment check if the value of Paris option is selected the use hide function to hide the div

 $('#exemple select').on('change', function() {
  if( this.value == 1){
    $("#xxx").hide();
  }
});

Upvotes: 1

Related Questions