Show-Hide div 在下拉列表中使用 jquery 但不起作用

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();
 });
});

但是当我去编辑文章或产品时这不起作用并从数据库中选择="selected" 一个类别。 thin 不显示 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

将更改函数的代码放在准备就绪的一侧

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

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

Answer 2

只需像这样显示 document.ready 上的方框：

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

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

Answer 3

如果问题是您需要在页面加载时显示与值关联的元素，只需在绑定更改事件处理程序后立即触发更改事件。

$('#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

Show-Hide div 在下拉列表中使用 jquery 但不起作用

Show-Hide divs using jquery in a dropdown But Not Working

html

jquery

jquery-plugins