根據選擇框的選擇顯示元素

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