Remplissez div avec .load en fonction de la sélection déroulante

Très bien, cela ressemble à une chose élémentaire, mais j’ai du mal à le faire fonctionner – ce que je veux accomplir est une liste déroulante avec environ 45 pays. Quand on est sélectionné, une div vide dans le corps sera chargée avec une div une autre page html (où je vais héberger les 45 div des informations de localisation correspondantes).

Utilisation d’un événement de style de chargement ajax

 $(document).ready(function(){ $("#county-result").load("county_list.html #county1"); });

Mais pour que le script soit moins lourd, je voudrais que la valeur de la liste déroulante soit l’identifiant de comté correspondant pour renseigner cette partie de la fonction de chargement (plutôt que d’écrire 45 noms individuels).

Des idées sur comment je peux faire ça?

J’ai créé un plunkr pour vous! J’espère que ça aide

Ce que je fais ici, c’est que j’ajoute un écouteur d’événement change à une sélection (liste déroulante) et que je m’assure que mes divs dans le fichier html des pays ont le même identifiant que mes valeurs d’option dans mon fichier principal (Celui où vous aurez le menu déroulant)

Donc, si vous voulez des informations sur l’Allemagne, vous devez vous assurer qu’une option de pays et div ressemblera un peu à ceci

  Berlin

Cette question est un peu large. Mais si je devais travailler avec des informations relatives à 45 comtés et si je devais afficher les informations du comté sélectionné dans une liste déroulante, j’utiliserais JSON comme source de données et remplirais les divs à l’aide d’un modèle et itérer sur l’object JSON. chercher l’id sélectionné.

Voici un exemple de la façon dont cela pourrait fonctionner. Notez que je suis en train de créer les options de la boîte de sélection de manière dynamic en fonction du jeu de données lui-même et la configuration vous permet de mettre facilement à jour les données si nécessaire.

Notez comment vous obtenez le JSON est à vous. Je l’ai codé en dur pour cet exemple, mais vous pouvez l’obtenir via une requête ajax ou en utilisant .get() , .load() , etc.

 var myCountyInfo = { counties: [{ name: 'County 1', id:123, locationInfo: { lat: 453245, lng: 45545, avgTemp: '75f', population: '5 B.' } }, { name: 'County 2', id:456, locationInfo: { lat: 11221, lng: 542222, avgTemp: '59f', population: '2 B.' } }, { name: 'County 3', id:789, locationInfo: { lat: 88555, lng: 54757, avgTemp: '58f', population: '1 B.' } }] } function populateSelectBoxes($select, data) { var counties = []; $.each(data, function() { counties.push(''); }); $select.append(counties.join('')); } function populateTableRow($tableBody, data, selectedCountyId) { var county; $.each(data, function() { if (this.id == selectedCountyId) { county = this; return false; } }); $tableBody.html(''+ '' + county.name + ''+ '' + county.locationInfo.lat +''+ '' + county.locationInfo.lng + ''+ '' + county.locationInfo.avgTemp + ''+ '' + county.locationInfo.population + ''+ ''); } populateSelectBoxes($('#my-select'), myCountyInfo.counties); $('#my-select').change(function() { var $this = $(this); var selection = $this.val(); populateTableRow($('#my-table tbody'), myCountyInfo.counties, selection); });

 td,th{ padding:5px; }

      County  Lat.  Lng.  Avg Temp  Population