首页html实现可选择不同的药品，每个药品可以选择数量

html实现可选择不同的药品，每个药品可以选择数量

时间: 2024-02-20 14:57:23 浏览: 76

要实现可选择不同的药品，并且每个药品可以选择数量，可以使用HTML的表单元素和JavaScript来实现。以下是一个简单的示例代码，可以实现该功能： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>药品选择示例</title> </head> <body> <h2>请选择需要购买的药品及数量：</h2> <form> <div> <label for="medicine1">药品A</label> <input type="number" id="medicine1" name="medicine1" value="0" min="0"> </div> <div> <label for="medicine2">药品B</label> <input type="number" id="medicine2" name="medicine2" value="0" min="0"> </div> <div> <label for="medicine3">药品C</label> <input type="number" id="medicine3" name="medicine3" value="0" min="0"> </div> <button type="button" onclick="submitForm()">提交</button> </form> <script> function submitForm() { var form = document.querySelector("form"); var formData = new FormData(form); for (var pair of formData.entries()) { if (pair[1] > 0) { alert("您选择了" + pair[0] + "，数量为" + pair[1]); } } } </script> </body> </html> ``` 在上述代码中，使用了三个`<div>`元素分别表示三种药品，每个`<div>`元素中包含一个`<label>`元素和一个`<input>`元素。`<label>`元素用于显示药品名称，`<input>`元素用于输入数量，其`type`属性为`number`，可以限制只能输入数字。同时使用`min`属性来限制最小值为0。一个提交按钮用于提交表单，绑定了`submitForm()`函数。该函数通过`FormData`对象获取表单数据，遍历每个表单项，如果数量大于0，弹出一个提示框，显示选择的药品名称和数量。

阅读全文