2016-07-30 2 views
1

Ich brauche folgendes zu erreichen:ändert Werteingabe zur Auswahl von 2 verschiedenen Drop-Down-Menüs Optionen basierend

Ich habe 2 Drop-Down-Menü in einem Formular für eine Telefon-Werkstatt-Website. Ein Dropdown-Menü heißt "Telefonmodell" und der andere "Fehlertyp".

Ich muss mit einem Preis kommen, nachdem ich diese 2 Auswahlen kombiniert habe. Es ist nicht notwendigerweise hat auf dem tatsächlichen Wert der wählt basieren: es im Grunde wie folgt:

if 
Phone model = "iPhone 6", 
failure type = "cracked screen" 
print the value 200 somewhere. 

OR 

Phone model = "iPhone 4" 
failure type = "cracked screen" 
print the value 50 somewhere. 

Beispiel von dem, was ich tun muss:

Wie könnte ich tun Das?

+0

ja, es ist möglich. – Polyov

+0

Wie kann ich das tun! –

+1

Sie haben gefragt, ob es möglich ist! –

Antwort

0

ein Ding wie das Versuchen:

get 1. und 2. Drop-Down-Wert, und dann eine Prüfung auf diese beiden Werte setzen wie:

if(val != '' && val2 != ''){ 
    if(val1 = 'text1' && val2 == 'text2'){ 
     document.getElementById('amount') = '50'; // will put the amount to textbox 
    } 
} 
+0

HI! Ich werde es jetzt versuchen und Sie wissen lassen, wie es geht! –

+0

Also tat ich das, aber es hat nicht funktioniert, ich frage mich, ob ich angeben muss, an welcher Form ich irgendwo rede oder vielleicht habe ich das Skript nicht verstanden?

+0

fügen Sie Ihre HTML-und JS-Code –

0

Sie es so

, tun können

Beispiel ist in jquery, aber Sie können das gleiche durch rohe Javascript tun.

HTML,

<label>Model</label> 
<select id="select-model" data-toggle="price-update"> 
    <option value="iphone4">Apple iPhone 4</option> 
    <option value="iphone5">Apple iPhone 5</option> 
</select> 

<label>Failure Type</label> 
<select id="select-issue" data-toggle="price-update"> 
    <option value="cracked-screen">Cracked Screen</option> 
    <option value="bricked-os">Bricked OS</option> 
</select> 

<label>Price</label> 
<input id="price" vlaue="" /> 

JS,

$('[data-toggle=price-update]').each(function(){ 
    $(this).change(function(){ 
    var model = $('select#select-model option:selected').val(), 
     issue = $('select#select-issue option:selected').val(), 
     input = $('#price'); 

    switch(model) { 
     case 'iphone4': 
      if(issue == 'cracked-screen'){ 
      input.val('$ 10.00'); 
      } 
      if(issue == 'bricked-os'){ 
      input.val('$ 20.00'); 
      } 
      break; 
     case 'iphone5': 
      if(issue == 'cracked-screen'){ 
      input.val('$ 30.00'); 
      } 
      if(issue == 'bricked-os'){ 
      input.val('$ 40.00'); 
      } 
      break; 
    } 
    }); 
}); 

Siehe Beispiel: https://jsfiddle.net/ey7tt3yp/


und ihre mehr sauberer, wenn Sie so tun, also können Sie haben viele Kombinationen wie diese.

JS,

var data = { 
    "iphone4": { 
     "cracked-screen": "10.00", 
     "bricked-os": "20.00" 
    }, 
    "iphone5": { 
     "cracked-screen": "30.00", 
     "bricked-os": "40.00" 
    } 
} 

$('[data-toggle=price-update]').each(function(){ 
    $(this).change(function(){ 
    var model = $('select#select-model option:selected').val(), 
     issue = $('select#select-issue option:selected').val(), 
     input = $('#price'); 

    input.val('$ ' + data[model][issue]); 
    }); 
}); 

Siehe Beispiel: https://jsfiddle.net/ey7tt3yp/3/

hoffe, das hilft! :)