Question

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

IN JS PAGE

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">

然后div为id non和yes。

＆LT; div id =“oui”class =“brandDiv”＆gt;

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

工作正常

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

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

我不是很专家。请帮忙。

Answer 1

这里我已完成上述问题的完整垃圾箱，一次试用演示链接如下所示：

演示： 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

Answer 2

最简单的选择是触发更改事件。所以尝试类似的事情：

$("select.slct").bind('change', function() {
//your stuff
}).trigger('change');

根据选择框选择显示元素

2 个答案: