Jquery dropdown chargement du contenu

Question

J'essaie de trouver des jquery qui me permettront d'utiliser une liste déroulante pour charger un contenu spécifique sur le site. Plus précisément, nous avons certains documents qui sont spécifiques à l'état. J'aimerais que la liste déroulante indique les états. L'utilisateur sélectionnera son état et affichera ensuite ses documents spécifiques à l'état.

Il n'y aura que quelques états, il n'est donc pas nécessaire d'utiliser une base de données ou de les extraire dynamiquement.

Toute aide serait appréciée.

Answer 1

Si vous utilisez jQuery, vous pouvez simplement lister la section que vous souhaitez afficher en tant que valeur d'option de votre sélection, puis en afficher chaque en utilisant l'événement de changement de jQuery.

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

Votre code HTML devrait ressembler à ceci

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

Vous pouvez ensuite utiliser votre code côté serveur pour récupérer la valeur de mycontent et charger les données nécessaires

Answer 3

Pourquoi avez-vous besoin d'utiliser jQuery? Je voudrais simplement utiliser JavaScript et AJAX.

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

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

Ensuite, votre la page getStateContent.php obtiendrait la valeur de l'état en appelant $ _REQUEST [ 'Etat']. Une fois que la page PHP connaît l'état utilisé, il peut afficher des liens vers les fichiers PDF appropriés.