Hide/Show Div below select depending on whether an option is selected or not

Question

Basically I have a select:

<select id="SelectExample">
    <option value="no_selection">&nbsp;</option>
    <option value="accessoires">Accessoires pour poubelles</option>
    <option value="chaises">Chaises</option>
    <option value="collecte">Collecte de déchets</option>
    <option value="poubelles">Poubelles</option>
</select>

Just below that is a div I want hidden if the value is no_selection

<div id="OtherDiv">
    <p><label for="poids">Poids (kg)</label><input type="text" id="poids" class="medium" disabled="disabled"/></p>
    <p><label for="prix">Prix (€)</label><input type="text" id="prix" class="medium" disabled="disabled"/></p>
    <p><label for="volume">Volume (l)</label><input type="text" id="volume" class="medium" disabled="disabled"/></p>
    <p><a href="#" class="no_label" id="sdd">Modifier les attributs…</a></p>
</div>

I've tried the previous JQuery and CSS examples I've found, but none seem to work for me, can anyone give me a good example of what to do as I'm a bit stuck, thanks.

Robin Winslow · Accepted Answer · 2012-09-04T14:10:46.017

Here you go.

You need to bind a change event to your select box, and on change, use :selected to retrieve the value of the selected option, and show or hide depending on that. The jQuery toggle method is great for that.

<!DOCTYPE html>

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    </head>
    <body>
        <select id="SelectExample">
            <option value="no_selection">&nbsp;</option>
            <option value="accessoires">Accessoires pour poubelles</option>
            <option value="chaises">Chaises</option>
            <option value="collecte">Collecte de déchets</option>
            <option value="poubelles">Poubelles</option>
        </select>

         <div id="OtherDiv">
            <p><label for="poids">Poids (kg)</label><input type="text" id="poids" class="medium" disabled="disabled"/></p>
            <p><label for="prix">Prix (€)</label><input type="text" id="prix" class="medium" disabled="disabled"/></p>
            <p><label for="volume">Volume (l)</label><input type="text" id="volume" class="medium" disabled="disabled"/></p>
            <p><a href="#" class="no_label" id="sdd">Modifier les attributs…</a></p>
        </div>

        <script>
            var showHideDiv = function (evt) {
                var selectedValue = jQuery(evt.target).val();
                var isSelected = selectedValue !== 'no_selection';
                jQuery("#OtherDiv").toggle(isSelected);
            }

            jQuery('#SelectExample').change(showHideDiv).trigger("change");
        </script>
    </body>
</html>

Oh I obviously misunderstood. I've reversed it (changed `===` for `!==`) — Robin Winslow, Sep 04 '12 at 10:18
I've now changed it slightly, to add a `.trigger("change")` so that when you page initially loads the div will be hidden. — Robin Winslow, Sep 04 '12 at 10:23

score 1 · Answer 2 · answered Sep 04 '12 at 09:58

1

<select id="SelectExample" onChange="$('#OtherDiv').toggle($(this).val() != 'no_selection');">

answered Sep 04 '12 at 09:58

Ariel

25,995
5
59
69

score 0 · Answer 3 · answered Sep 04 '12 at 09:58

0

Sounds like something of the following could work for you?

$("#SelectExample").change(
 function()
 {
  var that = $(this);

  if(that.val() == "no_selection"){
   $("#OtherDiv").show();
  }else{
   $("#OtherDiv").hide();
  }
 }
);

Just a simple OnChange event, then checking the value of the field - saying that, you don't even really need JQ for this..

answered Sep 04 '12 at 09:58

Stuart.Sklinar

3,683
4
35
89

1

Doing `that = $(this)` is completely pointless here. Don't clutter code with unnecessary things. – Ariel Sep 04 '12 at 10:00
1

Instead of using show/hide use `toggle()` with a boolean. i.e. exactly what my code does except you are doing it by calling `change()` instead of in the HTML. – Ariel Sep 04 '12 at 10:01
In this context - yes, it's pointless, but surely it's good practise to cache JQ objects, INCASE the code changes later to make extra use of `this`. As the changes of refractoring happening are slim – Stuart.Sklinar Sep 04 '12 at 10:01
1

No, it's not good practice. You add extra lines which take extra time to read. If you use the jQuery object more than once, then add the cache variable then - not in advance. – Ariel Sep 04 '12 at 10:02
Look - I'm just presenting different options - Your code is smaller, granted, but mine is easier to read - horses for courses. – Stuart.Sklinar Sep 04 '12 at 10:02

score 0 · Answer 4 · answered Sep 04 '12 at 10:02

change display:

<select id="SelectExample" onchange="showOther(this.value)">
    <option value="no_selection">&nbsp;</option>
    <option value="accessoires">Accessoires pour poubelles</option>
    <option value="chaises">Chaises</option>
    <option value="collecte">Collecte de déchets</option>
    <option value="poubelles">Poubelles</option>
</select>



<div id="OtherDiv" style="display:none">
    <p><label for="poids">Poids (kg)</label><input type="text" id="poids" class="medium" disabled="disabled"/></p>
    <p><label for="prix">Prix (€)</label><input type="text" id="prix" class="medium" disabled="disabled"/></p>
    <p><label for="volume">Volume (l)</label><input type="text" id="volume" class="medium" disabled="disabled"/></p>
    <p><a href="#" class="no_label" id="sdd">Modifier les attributs…</a></p>
</div>

and create a javascript function that handles your onchange:

<script type="text/javascript">
window.onload = function(){
    showOther = function(val){
        if(val && val !='no_selection'){
            document.getElementById('OtherDiv').style.display = '';
        } else {
            document.getElementById('OtherDiv').style.display = 'none';
        }
    }
}
</script>

JSFiddle Example

Hide/Show Div below select depending on whether an option is selected or not

4 Answers4