Comment puis-je basculer dynamiquement des éléments dans jquery?

Question

Donc ce que je veux faire est de faire un petit script dynamique pour sélectionner countys puis villes. Eh bien, j'ai tous les comptes et les villes dans une base de données mysql. Si je choisis un comté dans un tag <select>, les villes liées au comté devraient apparaître dans la prochaine balise <select>.

Donc, fondamentalement, peut-être que je pouvais faire quelque chose comme

$(document).ready(function() { 
    $('.county').click(function(){ 
    $(this.name).toggle(); 
    }); 
}); 

où l'option pour countys regarder peut-être quelque chose comme ceci:

<option value="This County" name="This County" class="county">This County</option> 

Lorsque je clique sur ce ci-dessus chaque ville connectée à "This County" doit apparaître . J'ai juste besoin d'une amende pour ça. Quelqu'un pense-t-il pouvoir aider?

Answer 1

Si tout est déjà sur la page sous la forme de select alors vous pouvez utiliser la valeur de l'option de comté pour afficher la bonne select.

$("#counties").change(function(){ 
    $(".cities").hide(); 
    $("#" + this.value + "-cities").show(); 
}); 

Et exemple de ce travail: http://jsfiddle.net/jonathon/upaar/

Cependant, je recommande contre cela car ce n'est pas grande. Vous aurez chaque ville sur votre page, même si vous avez seulement besoin d'une petite quantité. La meilleure option serait de remplir votre liste de comtés, puis de remplir les villes à la volée avec votre propre JSON et la méthode $.get().

Par exemple (je n'utilise ici que GeoNames, vous le remplacerez par vos propres données);

$.get('http://ws.geonames.org/countryInfoJSON', function(data) { 
    $.each(data.geonames, function(i, item) { 
     $("#countries").append("<option value='" + item.geonameId + "'>" + item.countryName + "</option>"); 
    }); 
}); 

$("#countries").change(function() { 
    $("#cities").empty(); 

    $.get('http://ws.geonames.org/childrenJSON?geonameId=' + this.value, function(data) { 
     $.each(data.geonames, function(i, item) { 
      $("#cities").append("<option value='" + item.geonameId + "'>" + item.name + "</option>"); 
     }); 
    }); 
}); 

Exemple de fonctionner: http://jsfiddle.net/jonathon/QkXAK/

Les charges au-dessus des pays et définit l'événement de changement de la sélection countries. Lorsque cette valeur change, elle est envoyée au serveur avec les données nécessaires. Dans ce cas, il envoie le geonameId et trouve les éléments enfants de ce pays. Il efface ensuite la sélection cities et ajoute les villes renvoyées dans la requête AJAX. L'avantage est que vous ne chargez que ce dont vous avez besoin, vous évitant d'avoir à envoyer toutes les données sur le chargement de la page. J'utilise GeoNames dans l'exemple, mais si vous avez votre propre jeu de données, les principes de base sont les mêmes.

Answer 2

Vous pouvez le faire, mais si vous voulez sélectionner l'élément vos villes sont par classe ou l'identifiant, vous devez changer 2 choses:

1. utiliser un sélecteur de classe ou id: $ (». '+ this.name' ou $ ('#' + this.name), respectivement.
2. Assurez-vous que vos classes ou vos ID ne contiennent pas d'espaces.

Edit:

Peut-être onchange serait plus approprié ici:

html:

<select id="counties"> 
    <option value="">Choose one...</option> 
    <option value="the-county">The county</option> 
    <option value="the-other-county">The other county</option> 
</select> 

<div class="city the-county">The city</div> 
<div class="city the-county">The second city</div> 
<div class="city the-other-county">The other city</div> 

javascript:

$(document).ready(function() { 
    var showCities = function(county) { 
     var $cities = $('.city'), 
      $countyCities = county ? $('.city.' + county) : [], 
      $otherCities = $cities.not($countyCities); 

     $otherCities.hide(); 
     $countyCities.show(); 
    } 

    $('#counties').change(function() { 
     showCities($(this).val()); 
    }); 

    // Don't show anything at page load. 
    showCities(null); 
}); 

Answer 3

Une implémentation côté client très simple serait quelque chose comme ça:

$(document).ready(function() { 
    $('.county').change(function(){ 
     $.get('/cities', {whichCounty: $(this).val()}, function(html) { 
      $('#cities').html(html);   
     }); 
    }); 
}); 

Ce qui précède suppose que vous avez une configuration du serveur qui prend un paramètre whichCounty, et envoie un retour <select> entièrement assemblé au client, qui est injecté dans un récipient #cities. Une autre méthode consiste à renvoyer les paires valeur/clé JSON par le serveur (par exemple CityId => CityName), à ​​effacer les options de la sélection en cours et à parcourir les nouvelles valeurs, à les construire dynamiquement et à les ajouter aux «villes» <select>.

Si l'exemple ci-dessus présente des avantages par rapport à cette dernière approche (JSON), c'est la facilité d'implémentation côté client.