顯示 - 隱藏在下拉菜單中使用jquery的div但不工作

Question

當窗體爲空或我從中輸入新內容時，Div正在工作。和HTML一樣

<select name="product" class="span4" id="product"> 
<option value="4">Article</option> 
<option value="1">Product</option> 
<option value="2">Movie Trailers</option> 
<option value="3">Landing Page</option> 
</select> 

<div class="1 box"> Select Div 1</div> 
<div class="2 box"> Select Div 2</div> 
<div class="3 box"> Select Div 3</div> 
<div class="4 box"> Select Div 4</div> 

的JavaScript：是

$(document).ready(function(){ 
$('.box').hide(); 
    $('#product').change(function() { 
    $('.box').hide(); 
    $('.' + $(this).val()).show(); 
}); 
}); 

但是當我去編輯文章或產品這不工作，選擇=「選擇」一個從數據庫類別。瘦不顯示DIV默認其選擇的div

<select name="product" class="span4" id="product"> 
<option value="4">Article</option> 
<option value="1">Product</option> 
<option value="2" selected="selected">Movie Trailers</option> 
<option value="3">Landing Page</option> 
</select> 

我需要兩個功能的選擇&無選擇的功能。你願意幫我:)

Answer 1

如果問題您需要在頁面加載時顯示與值相關的元素，只需在綁定更改事件處理程序後立即觸發更改事件即可。

$('#product').change(function() { 
    $('.box').hide(); 
    $('.' + $(this).val()).show(); 
}).change(); // trigger change so the code inside change handler runs and displays correct eleemnt 

另一個語法同一件事：

$('#product').change(function() { 
    $('.box').hide(); 
    $('.' + $(this).val()).show(); 
}).trigger('change'); 

DEMO

Answer 2

把你的代碼變更功能輸出就緒

$(document).ready(function(){ 
$('.box').hide(); 
}); 

$('#product').change(function() { 
    $('.box').hide(); 
    $('.' + $(this).val()).show(); 
}); 

Answer 3

的側面只需出示這樣的的document.ready箱：

$(document).ready(function(){ 
$('.box').hide(); 
$('.' + $('#product').val()).show(); 

    $('#product').change(function() { 
    $('.box').hide(); 
    $('.' + $(this).val()).show(); 
}); 
});