Jquery下拉加载内容
我试图找到一些jquery，允许我使用下拉列表加载网站上的特定内容。 具体来说，我们有一些特定于州的文件。 我希望下拉列表中列出各州。 用户将选择其状态，然后查看其特定于州的文档。
只有少数状态，因此不需要使用数据库或动态提取它们。
任何帮助，将不胜感激。
如果你正在使用jQuery，你可以列出你想要显示为select的选项值的部分，然后使用jQuery的change事件显示每个部分。
$(document).ready(function() { $('#myselector').change(function(){ $('.statecontent').hide(); $('#' + $(this).val()).show(); }); }); 你的HTML看起来像这样
State1 Specific Page Content Goes here State2 Specific Page Content Goes here State3 Specific Page Content Goes here
然后，您可以使用服务器端代码来获取mycontent的值并加载必要的数据
为什么需要使用jQuery？ 我只想使用普通的旧JavaScript和AJAX。
使用此HTML
State-Specific Page Content Goes here
而这个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='
'; //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的链接。