Jquery dropdown loading content

I'm trying to find some jquery that will allow me to use a dropdown to load specific co开发者_JAVA百科ntent on the website. Specifically we have some documents that are state specific. I'd like the drop-down to have the states listed. The user will select their state and then view their state specific docs.

There will only be a few states, so there is no need to use a database or to pull them dynamically.

Any help would be appreciated.

If you're using jQuery you can just list the section you want to show as your select's option value and then show each using jQuery's change event.

$(document).ready(function() {
   $('#myselector').change(function(){
      $('.statecontent').hide();
      $('#' + $(this).val()).show();    
   });
});

Your HTML would look like this

<select id="myselector">
   <option value="state1">State 1</option>
   <option value="state2">State 2 </option>
   <option value="state3">State 3</option>
</select>

<div id="state1" class="statecontent">State1 Specific Page Content Goes here</div>
<div id="state2" class="statecontent">State2 Specific Page Content Goes here</div>
<div id="state3" class="statecontent">State3 Specific Page Content Goes here</div>

<form method="get">
    <select name="mycontent" onchange="this.form.submit()">
        <option value="1">Content 1</option>
        <option value="2">Content 2</option>
        <option value="3">Content 3</option>
    </select>
</form>

You could then use your server side code to pick up the value of mycontent and load the necessary data

Why do you need to use jQuery? I would just use plain old JavaScript and AJAX.

Use this HTML

<select onchange="updatePage(this.value)">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    ...etc...
</select>
<div id="content">State-Specific Page Content Goes here</div>

And this Javascript

function updatePage(selectedState){
    //Create Ajax Object
    var ajax= getXmlObject(); 

    //Compose URL to fetch state content
    //if html names are StateContentNY.html, StateContentAK.html, etc..
    var url= 'StateContent' + selectedState + '.html';

    //If Ajax Object is ready...
    if (ajax.readyState == 4 || ajax.readyState == 0) {

        //Post the URL
        ajax.open("POST", url, true);

        //set some loading text so the user knows content is downloading
        document.getElementById('content').innerHTML='Loading... Please wait';

        //Alternately, you could pop an animated gif in there.
        //document.getElementById('content').innerHTML='<img src="images/loading.gif" />';

        //Define what happens when the ajax state changes
        ajax.onreadystatechange = function (x){

            //if state is 4 (Finished)
            if (ajax.readyState == 4) {

                //Get Response Text (This sample assumes it's HTML)
                var a = ajax.responseText;

                //put HTML in the div with the id "Content"
                document.getElementById('content').innerHTML=a;
            }
        }; 
        ajax.send(null);
    }
}
function getXmlObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        showError('Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.','Please Wait');
    }
}

Then your getStateContent.php page would get the value of the state by calling $_REQUEST['state']. Once the PHP page knows the state in use, it can display links to the appropriate PDFs.