0

我有一个选择框，可以根据其选择隐藏和显示元素。

在 JS 页面中

function showhide() {

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

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

在 HTML 中调用函数 showhide()

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

然后是 id 为 non 和 yes 的 div。

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

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

它工作正常

问题是当我刷新页面时，它只显示带有最后选择的选项的选择框，而不是基于该选择的元素

例如，如果我有 2 个选择框选项是和否，如果用户选择是，它显示你好，没有它显示 By 但是当我刷新页面时它正确显示是或否，但不是你好或 by

我不是很专家。请帮忙。

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 回答