根据选择框的选择显示元素

Question

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

IN PAGE JS

function showhide() { 

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

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

在HTML中 调用函数显示隐藏（）

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

，然后用ID非和DIVS肯定。

< DIV ID =“OUI”级=“brandDiv”>

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

它的做工精细

问题是，当我刷新页面，它只是显示选择框，最后选择的选项，但不是基于要素对选择

例如，如果我有2个选择框，选择yes和no ，如果用户选择是的，它显示了招呼 并没有显示它通过 但WH我刷新页面显示正确是或否，但不是你好或

我不是很专业。请帮助。

Answer 1

最简单的选择是触发更改事件。因此，尝试这样的：

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

Answer 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