Question

我正在餐馆网站上工作。我创建了一个带有select选项的表单，我希望如果有人选择了任何选项，那么将显示该选项的价格。我知道应该使用JavaScript但我在JavaScript中并不是那么好。

＆＃13;

<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>

＆＃13;

Answer 1

根据您的价格更改value代码的option。

＆＃13;

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

＆＃13;

<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>

＆＃13;

显示输入选择的价格

1 个答案: