2009-11-14 11 views
1

J'ai passé un peu de temps à chercher autour de cela, mais je n'arrive pas à tout comprendre.javascript si la liste déroulante est sélectionnée, puis définissez la valeur de la zone de texte

J'ai une liste déroulante d'expédition et je veux séparer le type d'expédition et le montant sélectionné et les mettre dans deux champs cachés distincts. (J'utilise des champs de texte au moment pour faciliter les tests)

Pour exemple- si elles choisissent de la première déroulant Nuit Livraison - 14.00 OnChange Je veux définir la valeur de mon shippingtype à « Livraison Nuit » et ma valeur sur le terrain d'expédition à « 14.00 »

J'ai déjà l'emplacement de travail (si l'utilisateur sélectionne pick-up, une nouvelle baisse apparaît vers le bas et que vous sélectionnez définit également la valeur de mon champ shippinglocation)

Voici ce que j'ai jusqu'à présent ...

<html> 
<head> 

<script type="text/javascript"> 
function SetShipping (objDropDown) 
{ 
    var objHidden = document.getElementById("shipping"); 
    objHidden.value = objDropDown.value; 
} 


function setShippingtype (objDropDown) 
{ 
    var objHidden = document.getElementById("shippingtype"); 
    objHidden.value = objDropDown.value; 
} 


function setShippinglocation (objDropDown) 
{ 
    var objHidden = document.getElementById("shippinglocation"); 
    objHidden.value = objDropDown.value; 
} 

function showEntry(obj,optionValue) 
{ 
//hide all entry selections onchange 
document.getElementById("pickup").style.display="none"; 
if(obj.value=="pickup") 
{ 
    document.getElementById(optionValue).style.display="inline"; 
} 
} 



</script> 
</head> 
<body> 
<form id="myform"> 

    <br /> 
    shippingselectbox 
    <br /> 
    <select onchange="showEntry(this,this.value);setShippingtype(this);" name="shippingselectbox"> 
     <option value="">Shipping Options</option> 
     <option value="pickup">Pickup - no charge</option> 
     <option value="UPS">UPS Standard Shipping - 3.00</option> 
     <option value="Overnight">Overnight Delivery - 14.00</option> 

    </select> 
    <br /> 
    <br /> 
    pickup 
    <span id="pickup" style="display:none;"> 
<select name="pickup" onchange="setShippinglocation(this)"> 
     <option>Please Choose a Location</option> 
     <option value="Billings">Billings, MT</option> 
     <option value="Livingston">Livingston, MT</option> 
     <option value="Miles City">Miles City, MT</option> 
     <option value="Cody">Cody, WY</option> 
     <option value="Sheridan">Sheridan, WY</option> 
    </select> 
    </span> 


    <br /> 
    <br /> 
<br /> 
shipping (set hidden form tag - shipping amount for paypal)<br /> 
    <input name="shipping" type="text" value=""/> 

    <br /> 
    <br /> 
<br /> 
shippingtype (set hidden form tag - variable for paypal to send to Chris)<br /> 
    <input name="shippingtype" type="text" value=""/> 
    <br /> 
    <br /> 

    <br /> 

shippinglocation (set hidden form tag - variable for paypal to send to Chris)<br /> 
    <input name="shippinglocation" id="shippinglocation" type="text" value=""/> 

</form> 
</body> 
</html> 

Répondre

0

Veuillez mettre en forme le code que vous avez posté, c'est possible. Tout comme vous dites attraper l'événement onChange. Je sérialiserais en quelque sorte la valeur de l'élément déroulant. Un tiret ou un soulignement ou quelque chose, puis faites un split() sur la valeur et stockez les divisions appropriées dans les champs de valeur d'entrée cachés appropriés.

Par exemple, en utilisant un prototype de brièveté:

function changeHandler(evt) { 
    var selected = evt.target[evt.target.selectedIndex]; 
    var values = selected.value.split("-"); 
    $('hidden1').value = values[0]; 
    $('hidden2').value = values[1]; 
} 
1

Je pris la liberté de changer le nom de votre méthode de SetShipping à setShipping pour maintenir votre convention constante de nommage. Franchement je ne pouvais pas être dérangé pour reformater mais j'ai testé donc amusez-vous à jouer avec.

<html> 
<head> 

<script type="text/javascript"> 
function setShipping (objDropDown) 
{ 
    var objHidden = document.getElementById("shipping"); 
    var type = objDropDown.options[objDropDown.selectedIndex].text.substring(objDropDown.options[objDropDown.selectedIndex].text.indexOf('-')+2, objDropDown.options[objDropDown.selectedIndex].text.length); 
    objHidden.value = type; 
} 


function setShippingtype (objDropDown) 
{ 
    var objHidden = document.getElementById("shippingtype"); 
    var type = objDropDown.options[objDropDown.selectedIndex].text.substring(0, objDropDown.options[objDropDown.selectedIndex].text.indexOf('-')-1); 
    objHidden.value = type; 
} 


function setShippinglocation (objDropDown) 
{ 
    var objHidden = document.getElementById("shippinglocation"); 
    objHidden.value = objDropDown.value; 
} 

function showEntry(obj,optionValue) 
{ 
    //hide all entry selections onchange 
    document.getElementById("pickup").style.display="none"; 
    if(obj.value=="pickup") 
    { 
     document.getElementById(optionValue).style.display="inline"; 
    } 
} 
</script> 
</head> 
<body> 
<form id="myform"> 

<br /> 
shippingselectbox 
<br /> 
<select onchange="showEntry(this,this.value);setShippingtype(this);setShipping(this);" name="shippingselectbox"> 
    <option value="">Shipping Options</option> 
    <option value="pickup">Pickup - no charge</option> 
    <option value="UPS">UPS Standard Shipping - 3.00</option> 
    <option value="Overnight">Overnight Delivery - 14.00</option> 
</select> 
<br /> 
<br /> 
pickup 
<span id="pickup" style="display:none;"> 
<select name="pickup" onchange="setShippinglocation(this)"> 
    <option>Please Choose a Location</option> 
    <option value="Billings">Billings, MT</option> 
    <option value="Livingston">Livingston, MT</option> 
    <option value="Miles City">Miles City, MT</option> 
    <option value="Cody">Cody, WY</option> 
    <option value="Sheridan">Sheridan, WY</option> 
</select> 
</span> 
<br /> 
<br /> 
<br /> 
shipping (set hidden form tag - shipping amount for paypal)<br /> 
<input name="shipping" id="shipping" type="text" value=""/> 
<br /> 
<br /> 
<br /> 
shippingtype (set hidden form tag - variable for paypal to send to Chris)<br /> 
<input name="shippingtype" id="shippingtype" type="text" value=""/> 
<br /> 
<br /> 
<br /> 
shippinglocation (set hidden form tag - variable for paypal to send to Chris)<br /> 
<input name="shippinglocation" id="shippinglocation" type="text" value=""/> 
</form> 
</body> 
</html> 
Questions connexes