取决于选择菜单值，但在页面加载

Question

这个问题jQuery的显示字段是指问题Show/hide fields depending on select value

<select id="viewSelector"> 
    <option value="0">-- Select a View --</option>  
    <option value="view1">view1</option> 
    <option value="view2">view2</option> 
    <option value="view3">view3</option> 
</select> 

<div id="view1"> 
    <!-- content --> 
</div> 
<div id="view2a"> 
    <!-- content --> 
</div> 
<div id="view2b"> 
    <!-- content --> 
</div> 
<div id="view3"> 
    <!-- content --> 
</div> 



$(document).ready(function() { 
    $.viewMap = { 
    '0' : $([]), 
    'view1' : $('#view1'), 
    'view2' : $('#view2a, #view2b'), 
    'view3' : $('#view3') 
    }; 

    $('#viewSelector').change(function() { 
    // hide all 
    $.each($.viewMap, function() { this.hide(); }); 
    // show current 
    $.viewMap[$(this).val()].show(); 
    }); 
}); 

当我在菜单中选择第二项则显示相应的字段。

这是一个例外情况，当页面加载选择菜单中已经选择了第二个菜单项时，该字段不显示。

正如你所能说的，我是jquery的新手，并且可以定义使用一些帮助来调整此代码，以便在加载页面时显示所选项目的字段。

感谢，

添

Answer 1

的HTML中的选择器数据在这种情况下最容易做的事情就是t装配工的change处理您已经有/需要，像这样：

$('#viewSelector').change(function() { 
    $.each($.viewMap, function() { this.hide(); }); 
    $.viewMap[$(this).val()].show(); 
}).change(); //only change to your code! 

这只是触发你绑定后立即相同选择的change事件，所以它发生在document.ready（你在哪里绑定）以及就像它变化时一样。没有参数的.change()相当于.trigger('change')。

Answer 2

移动代码到一个函数，并调用它的onload以及 -

$(document).ready(function() { 

    function toggleDivs(val) { 
     $.each($.viewMap, function() { this.hide(); }); 
     $.viewMap[val].show(); 
    } 

    toggleDivs($('#viewSelector').val()); 

    $.viewMap = { 
     '0' : $([]), 
    'view1' : $('#view1'), 
    'view2' : $('#view2a, #view2b'), 
    'view3' : $('#view3') 
    }; 

    $('#viewSelector').change(function() { 
    toggleDivs($(this).val()); 
    }); 
}); 

当然，你可能不会需要$.viewMap如果你只是存储<option> .. data-selectors="#view2a, #view2b"