Question

我正在尝试找到一些允许我使用下拉列表加载网站上特定内容的jquery。具体来说，我们有一些特定于州的文件。我希望下拉列表中列出各州。用户将选择其状态，然后查看其特定于州的文档。

只会有几个状态，因此无需使用数据库或动态提取它们。

任何帮助都将不胜感激。

Answer 1

如果你正在使用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>

Answer 2

<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的值并加载必要的数据

Answer 3

为什么需要使用jQuery？我只想使用普通的旧JavaScript和AJAX。

使用此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 页面会通过调用$ _REQUEST ['state']来获取状态值。一旦PHP页面知道正在使用的状态，它就可以显示指向相应PDF的链接。

Jquery下拉加载内容

3 个答案: