Jquery dropdown loading content

Question

I'm trying to find some jquery that will allow me to use a dropdown to load specific content 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.

Answer 1

<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

Answer 2

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.

Answer 3

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>