嘗試通過onChange表單事件將訪問者發送到另一個頁面並打開特定的div

Question

我有一個名爲states.php的頁面。每個狀態都會隱藏，直到您從下拉菜單中選擇它。然後顯示選定的狀態區分並隱藏其他區域。這完美地在states.php頁面上工作。

但是，我在網站上的每隔一頁上都有相同的表單。我希望能夠從say，home.php中選擇一個狀態，將它們重定向到states.php並打開正確的狀態div。

這裏的形式和HTML：

<div class="select"><span class="selectState">Select a State</span><span><form> 
     <select name="States" id="options" class="form-select">    
     <option value="state" selected="selected">- Select a State -</option>    
     <option value="1" >New York</option> 
     <option value="2" >New Jersey</option> 
     <option value="3" >Texas</option> 
     </select> 
     </form></span></div> 


<!-- NY Map --> 
<div id="state1" class="state stateShow"> 
NY CONTENT 
</div> 

<!-- NJ Map --> 
<div id="state2" class="state stateShow"> 
NJ CONTENT 
</div> 

<!-- TX Map --> 
<div id="state3" class="state stateShow"> 
TX CONTENT 
</div> 

而這裏的JavaScript的：

$(document).ready(function() { 
function optionCheck() { 
var i, len, optionVal, stateDiv, 
    selectOptions = document.getElementById("options"); 
for (i = 0, len = selectOptions.options.length; i < len; i++) { 
    optionVal = selectOptions.options[i].value; 
    stateDiv = document.getElementById("state" + optionVal); 
    if (!stateDiv) { continue; } 

    if (selectOptions.options[i].selected) { 
     stateDiv.className = "state stateShow"; 
    } else { 
     stateDiv.className = "state"; 
    } 
}  
} 
document.getElementById("options").onchange = optionCheck; 
}); 

和基本的CSS：

.state { 
display: none; 
} 
.stateShow { 
    display:block; 
} 

任何幫助將不勝感激。

感謝

Answer 1

你可以把狀態值在您的鏈接的哈希值，然後檢查您states.php的JavaScript。例如，您的主頁上，放鏈接：

<a href="states.php#1">New York</a> 

，然後在states.php的javascript：

$(document).ready(function() { 
    function optionCheck() { 
     // option check logic ... 
    } 
    document.getElementById("options").onchange = optionCheck; 

    if (window.location.hash) { 
     document.getElementById("options").value = window.location.hash.substring(1); 
     optionCheck(); 
    } 
});