php - Trying to send visitors to another page and open specific div via onChange form event

Question

I have a page called states.php. Each state is hidden until you select it from the dropdown menu. It then shows the state div selected and hides the others. This works perfectly on the states.php page.

However, I have the same form on every other page on the site. I would like to be able to select a state from say, home.php, redirect them to states.php and open the correct states div.

Here's the form and 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>

And here's the 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;
});

And basic CSS:

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

Any help would be greatly appreciated.

Thanks

Answer 1

You could put the state value in the hash of your link and then check that in your states.php javascript. For example, on your home page, put the link:

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

And then in your 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();
    }
});