Home/ Questions/Q 8486543
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T20:58:25+00:00

Basically I have a select: <select id=SelectExample> <option value=no_selection>&nbsp;</option> <option value=accessoires>Accessoires pour poubelles</option> <option

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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