Preis bei der Eingabe anzeigen wählen

-5

Ich arbeite an einer Restaurant-Website. Ich habe ein Formular mit der Option select erstellt und möchte, dass, wenn jemand eine der Optionen auswählt, ein Preis für diese Option angezeigt wird. Ich weiß, JavaScript sollte verwendet werden, aber ich bin nicht so gut in JavaScript.Preis bei der Eingabe anzeigen wählen

<div class="col-md-7 col-md-offset-1"> 
 
    <div class="col-md-3"> 
 
    <label for="menu">Food: </label> 
 
    </div> 
 
    <div class="col-md-5"> 
 
    <select name="menu" id="menu" required> 
 
     <option value="jollof" selected>Jollof w/ chicken</option> 
 
     <option value="jollof">Plain Rice w/ chicken</option> 
 
     <option value="jollof">Salad w/ chicken</option> 
 
     <option value="jollof">Jollof w/ Fish</option> 
 
     <option value="jollof">Plain Rice w/ chicken</option> 
 
     <option value="jollof">Fufu w/ chicken</option> 
 
     <option value="jollof">Fufu w/ Goat Meat</option> 
 
     <option value="jollof">Fufu w/ Fish</option> 
 
     <option value="jollof">Chips w/ Chicken</option> 
 
     <option value="jollof">Chips w/ Fish</option> 
 
    </select> 
 
    </div> 
 
</div>

Quelle

2017-07-01 Jeff Landen

In diesem Fall hängt es davon ab, wo der Preis herkommt? –

Großartig, Sie haben Ihr Markup geteilt. Wie werden jedoch die Preisdaten zur Verfügung gestellt? Ohne das werden wir keine Ahnung haben, was zu tun ist. – Terry

Ich war in der Lage, herauszufinden, und ich löste es dank –

Ändern der value der option Tags nach Ihren Preisen.

var drop = document.getElementById("menu"); 
 
var price = document.getElementById("price"); 
 
drop.onchange = function() { 
 
price.innerHTML = "$" + drop.value; 
 
}

<div class="col-md-7 col-md-offset-1"> 
 
    <div class="col-md-3"> 
 
    <label for="menu">Food: </label> 
 
    </div> 
 
    <div class="col-md-5"> 
 
    <select name="menu" id="menu" required> 
 
<option value="10" selected>Jollof w/ chicken</option> 
 
<option value="20" >Plain Rice w/ chicken</option> 
 
<option value="30" >Salad w/ chicken</option> 
 
<option value="40" >Jollof w/ Fish</option> 
 
<option value="50" >Plain Rice w/ chicken</option> 
 
<option value="60" >Fufu w/ chicken</option> 
 
<option value="70" >Fufu w/ Goat Meat</option> 
 
<option value="80" >Fufu w/ Fish</option> 
 
<option value="90" >Chips w/ Chicken</option> 
 
<option value="100" >Chips w/ Fish</option> 
 
</select> 
 
    </div> 
 
    <p id="price"></p> 
 
</div>

Quelle

2017-07-01 22:12:00

Vielen Dank, es hat funktioniert. Ich denke, ich sollte mit Javascript so schnell wie möglich beginnen –

Preis bei der Eingabe anzeigen wählen

Antwort

Verwandte Themen