CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mina Hafzalla
Mina Hafzalla

Reputation: 2821

Show a div on option selection

I have a selection menu (drop down list).

<select>
  <option id="one" value="something">Car</option>
  <option id="two" value="anything">Plane</option>
</select>

& the following div which located in somewhere in my page.

<div id="somediv">This is a string.</div>

I want to display the above div upon selecting the second item of the menu (id="two").

I have 2 questions: (1) What is the best way to keep this div hidden by default? I will just add display:none; to its styling, but maybe there is a better solution? (2) How can I make the div show up when the option of id="two" is selected? Any answer would be greatly appreciated.

Upvotes: 1

Views: 126

Answers (7)

Raj
Raj

Reputation: 209

The simplest way to hide within HTML

<div hidden>content</div>

To display an hidden div

$(document).ready(function(){

$("select").change(function () { $( "select option:selected").each(function(){

            if($(this).attr("value")=="anything"){


                $("#somediv").show();

            }

});. });

Upvotes: 1

Samuel Lindblom
Samuel Lindblom

Reputation: 819

For hiding it by default, using style="display: none"is the easiest. You could do it using jquery $('div#somediv').hide(); but I don't see any benefit to that other than you possibly wanting to keep the show/hide logic together.

Here are two simple solutions using a change() event.

If div#somediv should be shown permanently when option#two has been selected:

$("select").change(function() {
    if ($(this).val() == 'anything') $('div#somediv').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option id="one" value="something">Car</option>
  <option id="two" value="anything">Plane</option>
</select>
<div id="somediv" style="display: none">This is a string.</div>

If div#somediv should be shown while option#two is selected and disappear if the user selects another option:

$("select").change(function() {
    $('div#somediv').toggle($(this).val() == 'anything');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option id="one" value="something">Car</option>
  <option id="two" value="anything">Plane</option>
</select>
<div id="somediv" style="display: none">This is a string.</div>

You should probably give an id to the select as well, to make the jQuery selector less brittle.

Upvotes: 2

Ankit Chaudhary
Ankit Chaudhary

Reputation: 4099

1) You can hide the div initially giving the css property display:none; or by setting its display property using javascript which will run in initial load.

2) You can listen to the onchange event of the selectfield and check if value is 'anything' then show the div by changing its display style property to block and hidden in other cases. 

document.getElementById("somediv").style.display='none';  
var showHideDiv=function(selectField){
  var divElement=document.getElementById("somediv");
if (selectField.value=='anything')
  divElement.style.display='block';
  else
  divElement.style.display='none';  
}
<select onchange='showHideDiv(this)'>
  <option id="one" value="something">Car</option>
  <option id="two" value="anything">Plane</option>
</select>

<div id="somediv">This is a string.</div>

Upvotes: 1

Cyzanfar
Cyzanfar

Reputation: 7146

Here is what you can do:

in your html file: 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<select>
  <option id="one" value="something">Car</option>
  <option id="two" value="anything">Plane</option>
</select>

You'll need to import the JQuery library (which I show you there right above the <select> element) so that you can execute your script.

In your css file:

#somediv {
    display: none;
}

and finally here is the script that will show the dive when "plane" is selected

$('select').change(function(){
    $('#somediv').css('display','block');
});

Take a look at this JSFIDDLE I made for you.

Upvotes: 1

lshettyl
lshettyl

Reputation: 8181

So, I'd have a class for the div, let's say, is-hidden and my CSS will have .is-hidden { display: none; }. Then, do the following.

HTML:

<div id="somediv" class="is-hidden">This is a string.</div>

JS:

$div = $("#somediv");
$("select").on("change", function() {
    $div.is(".is-hidden") || $div.addClass("is-hidden");

    //Option 1
    if ($(this).find(":selected")[0].id === "two") {
        $div.removeClass("is-hidden");
    }

    //Option 2 (same as above, but a bit shorter)
    $(this).find(":selected")[0].id === "two" && $div.removeClass("is-hidden");
});

Upvotes: 1

KoeSeph
KoeSeph

Reputation: 21

So I wrote a simple jquery script that does what you described. Let me know if it fixes your problem. You can also do this with javascript, but I think jquery works for this just fine. http://codepen.io/Francisco104/pen/vEPRgp

$('select').change(function(){
  decide($(this));
});
var decide = function (elem) {
    var touch = elem;
  if (touch.val() === 'anything') {
   return $('#somediv').css('display', 'block');
  }
};

Upvotes: 2

Brian Kates
Brian Kates

Reputation: 488

Display none works.

Have you tried keying into the onchange event? http://www.w3schools.com/jsref/event_onchange.asp?

Upvotes: -1

Related Questions