如何显示一个选项后，从下拉列表中选择使用JavaScript？

我试图创建一个在线商店，我希望当有人从第一个下拉列表中选择例如东西（肉食爱好者披萨）我希望它显示在这个下拉列表的底部（享用一些美味的比萨饼），然后拿走选择的东西选项。如何显示一个选项后，从下拉列表中选择使用JavaScript？

我的代码是在下面的代码片段：

/* GLOBAL VARIABLES */ 
 
    
 
    var theList; 
 
    var prices; 
 
    var meat; 
 
    var select; 
 
    
 
    window.onload = function() { 
 
    \t \t //var option = document.createElement ("option"); 
 

 
    \t \t //option.textContent= theList; 
 
    \t \t //productList.appendChild (option); 
 
    //} 
 
    
 
    $('#theList').on('change', function() { 
 
     $("#meat").css('display', (this.value == '1') ? 'block' : 'none'); 
 
    }); 
 
    }

<!doctype html> 
 
    <html> 
 
    \t <head> 
 
      <link rel="stylesheet" href="assignment2.css"> 
 
    \t \t <H1> ASSIGNMENT 2- DOM Scripting - Pizza and Wings</H1> 
 
    \t </head 
 
    \t <body> 
 
    \t \t <div id="selection"><H4>PRODUCT SELECTION</H4> 
 
    \t \t \t 
 
    \t \t \t 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> 
 
    \t \t     </select> 
 
         
 
       <div style='display:none;' id='meat'>Meat 
 
     <br/>&nbsp; 
 
     <input type='text' class='text' name='meat' value size='20' /> 
 
     <br/> 
 
    </div> 
 
    \t \t 
 
    \t \t 
 
    \t <div><h4>YOUR CHOICES</h4> 
 
    \t \t <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> 
 
    \t    \t <input type="radio" id="price4" name="price" value="4">$19.95 -party size(16 slices)<br></div> 
 
    \t \t </div> 
 
    \t \t 
 
    \t \t 
 
    \t \t 
 
    \t \t 
 
    \t <div> Any extras? <div> <input type="radio" id="price1" name="price" value="1"> thin crust $0.49<br> 
 
    \t \t \t \t \t \t <input type="radio" id="price2" name="price" value="2">whole wheat $0.95<br> 
 
    \t \t <input type="radio" id="price3" name="price" value="3">extra cheese $1.49<br></div></div> 
 
    \t \t 
 
    \t \t How many? <input id="amount" type="text"><br> <div class="button"> 
 
       <input type="button" class="btn" id="add" value="ADD TO ORDER"> 
 
    \t \t  <input type="button" class="btn" id="remove" value="REMOVE LAST ITEM"> 
 
    \t \t <br> 
 
      </div> 
 
       
 
    \t \t <h4> ORDER STATUS </h4> 
 
    \t \t 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"> 
 
      
 
    \t \t 
 
    \t \t 
 
    \t \t </div> 
 
    \t \t <script type="text/javascript" src="assignment2.js"></script>   
 
    \t </body> 
 
    \t 
 
    \t </html>

谢谢！

来源

2015-11-12 user5556453

什么是重现步骤？预期的行为？实际行为？错误信息？请不要只发布代码，并期望其他人解析和调试它们的头脑。见http://stackoverflow.com/help/how-to-ask –

查一查怎么的JavaScript功能的onChange和工作的selectedIndex。这会给你所有你需要的答案。 – durbnpoisn

你目前与“肉”的ID两个元素并作为ID的必须是唯一的，这样它会找到的第一个是在选择列表中的选项。我将其改为“肉食爱好者”，并使选项值保持一致。

隐藏的“选择产品”选项，我用了一个类似的比较，以检查他们是否选择比选择其他任何东西，把它藏如果是的话。

$("#select").css('display', (this.value == '0') ? 'block' : 'none');

几个其他的事情需要注意，头部标签缺少一个右括号角度和jQuery目前尚未对您所提供的代码示例定义但这可能只是在创建测试用例。

这里是一个演示中，我放在一起的它在行动：http://codepen.io/jjclane/pen/rOoyGY

来源

2015-11-12 21:32:58

谢谢你，但代码似乎没有其他地方工作，但对codepen – user5556453

我从后采取的代码和编辑它，显然删除HTML，头部和身体的标签，他们不codepen工作，但除此之外应该是一样的吗？ –

我加回，并试图测试，但它似乎没有工作 – user5556453

如何显示一个选项后，从下拉列表中选择使用JavaScript？

回答

相关问题