Jquery下拉列表加载内容

如果您使用的是jQuery,那么只需列出要显示为select选项值的部分,然后使用jQuery的change事件显示每个部分。

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

您的HTML将如下所示

<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>

然后可以使用服务器端代码获取 mycontent 加载必要的数据

使用此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>

这个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');
    }
}

然后你的 getStateContent.php文件 页面将通过调用$\u REQUEST['state']获取状态值。一旦PHP页面知道使用中的状态,它就可以显示到相应pdf的链接。