在下拉列表中使用jquery显示隐藏div但不工作

Question

当Form为Blank或者我从new输入东西时，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();
 });
});

但是，当我去编辑文章或产品时，这不起作用并选择=＆＃34;选择＆＃34;来自DB的类别。 thin don显示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>

我需要功能选择＆amp;没有选择功能。你想帮助我吗:)。

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(function(){
 $('.box').hide();
 $('.' + $('#product').val()).show();

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