[英]How to display something after an option from a drop down list has been selected using javascript?
我正在尝试创建一个在线商店，我希望有人从第一个下拉列表中选择某项内容，例如（Meat Lovers披萨），我希望它在该下拉列表的底部显示（享受一些美味的肉比萨）然后删除“选择某物”选项。
我的代码在以下代码片段中：
/* GLOBAL VARIABLES */ var theList; var prices; var meat; var select; window.onload = function () { //var option = document.createElement ("option"); //option.textContent= theList; //productList.appendChild (option); //} $('#theList').on('change', function () { $("#meat").css('display', (this.value == '1') ? 'block' : 'none'); }); }
<!doctype html> <html> <head> <link rel="stylesheet" href="assignment2.css"> <H1> ASSIGNMENT 2- DOM Scripting - Pizza and Wings</H1> </head <body> <div id="selection"><H4>PRODUCT SELECTION</H4> Whats your fancy? <select id ="theList" name="theList"> <option id="select" value="0">Select product here</option> <option id="meat" value="meat">Meat Lovers Pizza</option> <option id="margaritta" value="margaritta">Margaritta</option> <option id="" value="2">Pepparoni</option> <option id="" value="3">Plain cheese</option> </select> <div style='display:none;' id='meat'>Meat <br/> <input type='text' class='text' name='meat' value size='20' /> <br/> </div> <div><h4>YOUR CHOICES</h4> <div>Which one would you like? <div class="prices"> <input type="radio" id="price1" name="price" value="1"> $9.95 -small(6 slices)<br> <input type="radio" id="price2" name="price" value="2">$12.95 -medium(8 slices)<br> <input type="radio" id="price3" name="price" value="3">$15.95 -large(10 slices)<br> <input type="radio" id="price4" name="price" value="4">$19.95 -party size(16 slices)<br></div> </div> <div> Any extras? <div> <input type="radio" id="price1" name="price" value="1"> thin crust $0.49<br> <input type="radio" id="price2" name="price" value="2">whole wheat $0.95<br> <input type="radio" id="price3" name="price" value="3">extra cheese $1.49<br></div></div> How many? <input id="amount" type="text"><br> <div class="button"> <input type="button" class="btn" id="add" value="ADD TO ORDER"> <input type="button" class="btn" id="remove" value="REMOVE LAST ITEM"> <br> </div> <h4> ORDER STATUS </h4> ITEMS: <input id="items" type="text"> TOTAL: <input id="credits" type="text"> <input type="button" class="btn" id="now" value="ORDER NOW"> <input type="button" class="btn" id="cancel" value="CANCEL"> </div> <script type="text/javascript" src="assignment2.js"></script> </body> </html>
谢谢！
您当前有两个元素的ID为“肉”，并且ID必须是唯一的，因此它将在选择列表中找到第一个元素。 我将其更改为“肉类爱好者”，并使选项值保持一致。
为了隐藏“选择产品”选项，我使用了类似的比较来检查他们是否选择了该选项以外的其他选项，如果可以，则将其隐藏。
$("#select").css('display', (this.value == '0') ? 'block' : 'none');
另外需要注意的几件事是，head标签缺少闭合角括号，并且您提供的代码示例上当前未定义jQuery，但这可能只是您创建测试用例。
这是我将其放在一起进行操作的演示： http : //codepen.io/jjclane/pen/rOoyGY
使用javascript在下拉列表中显示选定的选项
[英]Display a selected option from a drop down list into a box using javascript
当在一个下拉列表中选择一个选项时，如何使用javascript在另一个下拉列表中显示其相关值
[英]when one option selected in one drop down list then how to display its related value in another drop down list using javascript
如何在ASP.NET Web应用程序中使用JavaScript根据下拉列表中的所选选项显示不同的输入类型
[英]How to display different input type depending on selected option from a drop down list using javascript in asp.net web application
如何使用取决于另一个下拉列表中所选选项的下拉列表显示表格简码
[英]how to display table shortcode with a drop-down list that depends on the selected option in another drop-down list
如何使用 jQuery、JavaScript 和 HTML 动态设置下拉列表的选定选项？
[英]How do I dynamically set the selected option of a drop-down list using jQuery, JavaScript and HTML?
下拉列表中的 Select 选项并使用 javascript 在表格单元格中显示
[英]Select option from the drop down list and display in table cell using javascript
在选择相关下拉选项之前，如何在页面加载时默认隐藏文本字段？
[英]How to have text fields hidden by default on page load until the relevant drop down option has been selected?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.