0

I have one select box that hides and displays elements based on its selection.

IN JS PAGE

function showhide() {

    $("div.brandDiv").hide();
    $("select.slct").bind('change', function() {

        $('div.brandDiv').hide();
        var targetId = $(this).val();
        $('div#' + targetId).show();
    });
}

IN HTML call to function showhide()

 <select name="ex" class="slct">

and then divs with id non and yes .

< div id="oui" class="brandDiv">

         <input type="text" name='num' class="numbersonly" maxlength="2" ></input>
                </div>

Its working fine

Problem is when I refresh page it just displays select box with lastly selected option but not elements based on that selection

For example if I have 2 select box options yes and no and if user select yes it shows hello and with no it show By but when i refresh page it shows properly yes or no but not hello or by

I am not very expert .Please help.

4

2 に答える 2

2

ここで、以下に示すようにデモリンクを試してみると、上記の問題の完全なビンが作成されました。

デモ: http://codebins.com/bin/4ldqp9q

HTML: 

<div id="panel">
  <select name="ex" class="slct">
    <option value="div1">
      Option1
    </option>
    <option value="div2">
      Option2
    </option>
    <option value="div3">
      Option3
    </option>
  </select>
  <div id="div1" class="brandDiv">
    Here is content for brand Div 1.
  </div>
  <div id="div2" class="brandDiv">
    Here is content for brand Div 2.
  </div>
  <div id="div3" class="brandDiv">
    Here is content for brand Div 3.
  </div>
</div>

CSS:

.slct{
  border:1px solid #442288;
}
.brandDiv{
  border:1px solid #225599;
  margin-top:5px;
  padding:5px;
  background:#a4c8ed;
  height:30px;
  display:none;
}

jQuery:

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

デモ: http://codebins.com/bin/4ldqp9q

于 2012-07-24T14:16:11.487 に答える
1

最も簡単なオプションは、変更イベントをトリガーすることです。したがって、次のようなものを試してください。

$("select.slct").bind('change', function() {
//your stuff
}).trigger('change');
于 2012-07-24T09:05:52.650 に答える