2009-09-04 7 views
2

Y a-t-il une meilleure façon de faire ce code jquery?Aide avec une liste de pays/d'état jquery

Actuellement, je dois utiliser PHP pour insérer la position de départ du code jquery.
Le code est pour une liste de pays/d'état.

Si un utilisateur sélectionne USA, une liste déroulante d'état est située en dessous de celui-ci, si un autre pays est sélectionné, il affichera une zone de saisie de texte différente et masquera la liste déroulante.

Maintenant, si un utilisateur a un pays enregistré dans la base de données et qu'il est sur une page pour éditer cette valeur, alors je dois utiliser PHP pour montrer ce qui doit être affiché en premier, soit les états USA ou l'état. Lorsqu'un utilisateur s'inscrit, la liste d'états des États-Unis s'affiche par défaut uniquement s'il choisit un pays autre que les États-Unis si la liste d'états a été remplacée par une entrée d'état.

J'espère que j'avais du sens. le but ultime est de faire en quelque sorte complètement javascript/jquery et ne pas compter sur PHP pour définir quoi que ce soit

country dropdown list 
<select name="country" id="country" class="textarealong signup_good"/> 
<option value=1001>Choose a Country</option> 
<option value=238>Zimbabwe</option> 
... 
</select> 

USA state dropdown list 
<select name="usstate" id="usstate" class="textarealong signup_good"/> 
<option value=1001>Choose a State</option> 
<option value=238>Florida</option> 
... 
</select> 

NON-USA state INPUT box 
<input type="text" id="othstate" name="othstate" id="othstate" value="" class="textarealong signup_good" maxlength="100"> 


<?PHP 
//fix jquery country/state list based on there current saved country/state 
if($_SESSION['member_info']['country'] == 224){ 
    //$jquerycountry = "$('#othstate').hide().attr(\"disabled\", \"disabled\");"; 
    $jquerycountry = "$('#othstate').hide().val('');"; 
}else{ 
    $jquerycountry = "$('#usstate').hide().attr(\"disabled\", \"disabled\");"; 
} 
?> 
<script> 
$(document).ready(function() { 
    locationlist(); 
}); 

function locationlist() { 
    <?PHP echo $jquerycountry; // includes country jquery code from above ?> 
    $('#country').change(function() { 
     var val = $(this).val(); 
     if (val == 224) { 
      $('#usstate').val('').show().removeAttr("disabled"); 
      $('#othstate').hide().val(''); 
     } else { 
      $('#usstate').val('').hide().attr("disabled", "disabled"); 
      $('#othstate').show().removeAttr("disabled"); 
     } 
    }); 
} 
</script> 

Répondre

1

Peut-être que cela pourrait être une solution bien pour vous:

HTML sélection et champs de saisie:

<select name="country" id="country" class="textarealong signup_good"/> 
    <option value=1001>Choose a Country</option> 
    <option value=238>Zimbabwe</option> 
    <option value=239>Rwanda</option> 
</select> 

USA state dropdown list 
<select name="usstate" id="usstate" class="textarealong signup_good"/> 
    <option value=1001>Choose a State</option> 
    <option value=238>Florida</option> 
</select> 

<input id="otherstate"/> 

Ensuite, la partie jQuery avec une « ready'-magie: masquer le champ otherstate et déclencher l'événement de changement sur le chargement comme Greg mentionné déjà. Cela fait en sorte que si un pays a déjà été sélectionné à la page charge le champ de formulaire à droite sera sélectionné:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#otherstate").hide(); 
    $("#country").trigger("change"); 
    }); 

    $("#country").change(function() { 
    if ($("#country").val() != '1001') { 
     $("#usstate").hide(); 
     $("#otherstate").show(); 
    } else { 
     $("#usstate").show(); 
     $("#otherstate").hide();  
    } 
    }); 
</script> 

espère que cela vous aidera! ;)

+0

est un bon début, semble fonctionner, seul problème est quand je change du pays avec une liste déroulante à une entrée de texte, il devrait cacher la liste déroulante – JasonDavis

+0

Je vois que vous avez $ ("# otherstate") .cacher(); là dedans mais il semble ne pas fonctionner – JasonDavis

+0

On dirait que la méthode '.hide()' ne fonctionne pas correctement. Fonctionne parfaitement dans ma version locale avec jQuery 1.3.2 min - le masquage de la liste déroulante ainsi que le masquage du champ de saisie de texte. – xijo

1

Pouvez-vous faire exactement cela à ready()?

loctionlist(); 
$('#country').trigger('change'); 
1

(En venant à partir d'un angle complètement différent :)

Avec toutes les options/possibilités que vous décrivez ici, il pourrait être sage de la ferraille tous les menus déroulants et il suffit d'utiliser un texte de saisie semi-automatique champ.