Question

I have one form where in select box in which I have two options “oui” and “non”:

• When “oui” is selected “hello” is displayed
• When “non” is selected “not valid” is displayed

My problem is when I refresh page after submitting form, “oui” or “non” is properly selected but not the value based on it like “hello” or “not valid”

here is some code

<p>choose option: <select name="opt" class="slct">
    <option value="0" selected="selected">--</option>
    <option value="oui">Oui</option>
    <option value="non">Non</option>
    </select>
</p>
<div id="oui" class="brandDiv">
  hello
</div>
<div id="non" class="brandDiv">
  not valid
</div>

and the jquery

function showhide() {
$("div.brandDiv").hide();
$("select.slct").bind('change', function() {
    $('div.brandDiv').hide();
    var targetId = $(this).val();
    $('div#' + targetId).show();
});
}

Thank you all in advance.

Answer 1

What about adding, the following ?

$( function() {
    $("select.slct").each(
      function() {
        $('div.brandDiv').hide();
        var targetId = $(this).val();
        $('div#' + targetId).show();
      }
    );
  }
)