入力時に価格を表示

Question

私はレストランのウェブサイトで作業しています。私は選択したオプションでフォームを作成しました。誰かがそのオプションを選択すると、そのオプションの価格が表示されます。私はJavaScriptが使用されるべきであることを知っていますが、JavaScriptではそれほど良くありません。

Answer 1

の変更をあなたの価格に応じてoptionタグの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="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>

。この場合

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>