0
点赞
收藏
分享

微信扫一扫

原生javascript 获取select下拉列表内容及值

西曲风 2022-05-23 阅读 42

一个编程作业,要求的知识点都是基础的,但也是典型的,

<!DOCTYPE html>

<html>

<body>

<h1>Pizzas Ordering Form</h1>

<p> Simply select your pizza and enter quantity to calculate total order cost </p>

<form id="orderForm">
<p>
<label for="pizza_list">Select a pizza</label>
<select name="pizza_list " id="pizza_list">
<option value="---" selected id="empty">-----</option>
<option value="10" name="Margherita">Margherita($10 each)</option>
<option value="12" name="Pepperoni">Pepperoni ($12 each)</option>
<option value="15" name="Supreme">Supreme ($15 each)</option>
</select>
</p>

<p>
<label for="pizza_quantity">Pizza Quantity</label>
<input type="text" name="pizza_quantity" value="0" id="pizza_quantity">
</p>

<p> <input type="button" value="Add Pizza" id="add_pizza" onclick="javascript:addPizza()"> </p>

<p> <input type="button" value="Calculate Total Cost" id="total_cost" onclick="javascript:calculate()"> </p>

</form>

<p><ul id="ulList"></ul></p>

<div id="message"></div>

<script>
// Your code goes here
var total_cost = 0;

function addPizza(){
var pizza_list = document.getElementById("pizza_list");
var pizza_list_selectedIndex = pizza_list.selectedIndex;
var pizza_list_selected_quantity = document.getElementById("pizza_quantity").value;
total_cost += pizza_list.options[pizza_list_selectedIndex].value * document.getElementById("pizza_quantity").value;
document.getElementById("ulList").innerHTML += "<li>" + pizza_list.options[pizza_list_selectedIndex].text + ":" + pizza_list_selected_quantity + "</li>";
}

function calculate(){
document.getElementById("message").innerHTML = "Total bill of the order is - $" + total_cost.toFixed(2);
}
</script>

</body>

</html>


原生javascript 获取select下拉列表内容及值_javascript

举报

相关推荐

0 条评论