取決於選擇菜單值，但在頁面加載

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"