Comment présélectionner automatiquement (pas seulement définir la valeur) liste déroulante billing_state être la même que la liste déroulante shipping_state

Question

J'ai regardé partout sur google, je suppose que je ne sais pas quoi chercher parce que je cherche à faire quelque chose de relativement simple. J'essaie seulement de poser des questions ici si je ne suis pas capable de trouver des réponses en ligne.

Je cherche la réponse en clair javascript. Je ne veux pas utiliser jquery. Merci beaucoup!

Vous savez comment lorsque vous remplissez un formulaire en ligne pour le vérifier, vous pouvez cliquer sur une option qui dit «cochez cette case si vos informations de facturation sont les mêmes que vos informations d'expédition» et ensuite lorsque vous cliquez sur la case, les informations de facturation sont automatiquement remplies avec les informations d'expédition.

Je suis capable de faire fonctionner correctement tous les types de texte d'entrée, mais je n'arrive pas à faire en sorte que la case de sélection déroulante de l'état de facturation soit identique à celle qui a déjà été sélectionnée pour shipping_state.

J'utilise tous les états. Ce qui suit est juste pour simplifier l'exemple.

J'ai une case à cocher avec un onchange="setBillingAddress(this)" et j'utilise une instruction if pour vérifier si la case est cochée. Donc tout cela fonctionne parfaitement. Je peux obtenir la valeur de liste déroulante billing_state définie dans shipping_state à mettre en surbrillance dans la liste déroulante billing_state (vous pouvez seulement voir que sa valeur a été définie sur la valeur qui se trouvait dans la liste déroulante shipping_state après avoir cliqué sur la liste déroulante). Je le veux pour qu'il présélectionne et affiche l'état sans avoir à cliquer sur "choisir l'état". Ma question est, qu'est-ce que je mets à l'intérieur de la fonction setBillingAddress() pour obtenir l'état de facturation à être présélectionné et montré à l'utilisateur afin qu'ils ne doivent pas voir une autre liste déroulante qui dit "sélectionner l'état" même si la valeur a déjà été défini.

J'ai deux menus déroulants. Un nommé shipping_state avec un identifiant de shipping_state et l'autre nommé billing_state avec un identifiant de billing_state

Answer 1

Ajouter un gestionnaire d'événements « changement » sur votre adresse de facturation, et dans le gestionnaire, définissez l'index sélectionné de l'adresse d'expédition pour correspondre à l'index sélectionné de l'adresse de facturation (en supposant que tout votre liste de sélection correspond, ce qui devrait être le cas). Voir en action ici:

http://jsfiddle.net/4AcjD/10/

Voici le HTML:

<div id="billing"> 
<p>Billing:</p> 
<select name="billingState" id="billingState"> 
    <option>Alabama</option>    
    <option>Alaska</option>     
    <option>Arizona</option> 
    <!-- etc --> 
</select> 
</div> 

<div id="shipping"> 
<p>Shipping:</p> 
<select name="shippingState" id="shippingState"> 
    <option>Alabama</option>    
    <option>Alaska</option>     
    <option>Arizona</option> 
    <!-- etc --> 
</select> 
</div> 

Et le Javascript:

var billingState = document.getElementById("billingState"); 
var shippingState = document.getElementById("shippingState"); 
billingState.addEventListener("change", 
    function() { 
     shippingState.selectedIndex = billingState.selectedIndex; 
    }); 

Answer 2

Vous avez juste besoin de définir la valeur d'un select égale à l'autre. Vous voudrez peut-être passer en revue certaines de vos anciennes questions et accepter des réponses.

http://jsfiddle.net/pZZQt/

function setBillingAddress(elem) { 
    document.getElementById('billing_state').value = elem.value; 
}​