handmoving
2015-04-28 13:19
采纳率: 100%
浏览 1.8k
已采纳

求一个简单点的,根据下拉列表内容,在jsp页面输出List的一个小项目

我还是个菜鸟,求给的东西简单易懂,有一些介绍是最好的。谢谢!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • tsinggao 2015-04-28 16:15
    已采纳
     <script>
        function showList()
        {
            document.getElementById("div0").style.display = "none";
            document.getElementById("div1").style.display = "none";
            document.getElementById("div2").style.display = "none";
            if(document.getElementById("dishType").value==0)
            {           
                document.getElementById("div0").style.display = "block";
            }
            if(document.getElementById("dishType").value==1)
            {           
                document.getElementById("div1").style.display = "block";
            }
            if(document.getElementById("dishType").value==2)
            {           
                document.getElementById("div2").style.display = "block";
            }
        }
    </script>
    
    
    <html>
      <head>    
        <title>根据菜系点餐</title>   
      </head>
    
      <body>
        <br>
        <br>
        <div align="center"><h1>请选择菜系:</h1></div>
        <br>
        <div align="center">
        <select id="dishType" name="dishType" style="width:300px;height:30px" onchange="javascript:showList();">
            <option value=0 selected></option>
            <option value=1>湘菜</option>
            <option value=2>川菜</option>
        </select>
        </div>
        <hr/>
        <br>
        <br>
        <br>
        <br>
    
        <div id="div0">
            <table align="center" width="500px" border="1">
                <tr>
                    <td width="20%" height="30px">序号</td>
                    <td width="40%" height="30px">菜名</td>
                    <td width="40%" height="30px">价格</td>               
                </tr>
            </table>
        </div>
        <div id="div1" style="display:none">
            <table align="center" width="500px" border="1">
                <tr>
                    <td width="20%" height="30px">序号</td>
                    <td width="40%" height="30px">菜名</td>
                    <td width="40%" height="30px">价格</td>               
                </tr>
                <tr>
                    <td width="20%" height="30px">1</td>
                    <td width="40%" height="30px">小炒肉</td>
                    <td width="40%" height="30px">28元</td>                
                </tr>
                <tr>
                    <td width="20%" height="30px">2</td>
                    <td width="40%" height="30px">毛家红烧肉</td>
                    <td width="40%" height="30px">48元</td>                
                </tr>
                <tr>
                    <td width="20%" height="30px">3</td>
                    <td width="40%" height="30px">腊味合蒸</td>
                    <td width="40%" height="30px">38元</td>                
                </tr>
            </table>
        </div>
        <div id="div2" style="display:none">
            <table align="center" width="500px" border="1">
                <tr>
                    <td width="20%" height="30px">序号</td>
                    <td width="40%" height="30px">菜名</td>
                    <td width="40%" height="30px">价格</td>               
                </tr>
                <tr>
                    <td width="20%" height="30px">1</td>
                    <td width="40%" height="30px">麻婆豆腐</td>
                    <td width="40%" height="30px">18元</td>                
                </tr>
                <tr>
                    <td width="20%" height="30px">2</td>
                    <td width="40%" height="30px">水煮肉片</td>
                    <td width="40%" height="30px">38元</td>                
                </tr>
                <tr>
                    <td width="20%" height="30px">3</td>
                    <td width="40%" height="30px">宫保鸡丁</td>
                    <td width="40%" height="30px">28元</td>                
                </tr>
            </table>
        </div>
        <div id="div3" style="display:none"></div>
        <div id="div4" style="display:none"></div>
      </body>
    </html>
    
    
    点赞 打赏 评论
  • blownewbee 2015-04-28 13:24
    点赞 打赏 评论
  • tsinggao 2015-04-28 16:14
    function showList() { document.getElementById("div0").style.display = "none"; document.getElementById("div1").style.display = "none"; document.getElementById("div2").style.display = "none"; if(document.getElementById("dishType").value==0) { document.getElementById("div0").style.display = "block"; } if(document.getElementById("dishType").value==1) { document.getElementById("div1").style.display = "block"; } if(document.getElementById("dishType").value==2) { document.getElementById("div2").style.display = "block"; } }




    根据菜系点餐






    请选择菜系:







    湘菜
    川菜











    <div id="div0">
        <table align="center" width="500px" border="1">
            <tr>
                <td width="20%" height="30px">序号</td>
                <td width="40%" height="30px">菜名</td>
                <td width="40%" height="30px">价格</td>               
            </tr>
        </table>
    </div>
    <div id="div1" style="display:none">
        <table align="center" width="500px" border="1">
            <tr>
                <td width="20%" height="30px">序号</td>
                <td width="40%" height="30px">菜名</td>
                <td width="40%" height="30px">价格</td>               
            </tr>
            <tr>
                <td width="20%" height="30px">1</td>
                <td width="40%" height="30px">小炒肉</td>
                <td width="40%" height="30px">28元</td>                
            </tr>
            <tr>
                <td width="20%" height="30px">2</td>
                <td width="40%" height="30px">毛家红烧肉</td>
                <td width="40%" height="30px">48元</td>                
            </tr>
            <tr>
                <td width="20%" height="30px">3</td>
                <td width="40%" height="30px">腊味合蒸</td>
                <td width="40%" height="30px">38元</td>                
            </tr>
        </table>
    </div>
    <div id="div2" style="display:none">
        <table align="center" width="500px" border="1">
            <tr>
                <td width="20%" height="30px">序号</td>
                <td width="40%" height="30px">菜名</td>
                <td width="40%" height="30px">价格</td>               
            </tr>
            <tr>
                <td width="20%" height="30px">1</td>
                <td width="40%" height="30px">麻婆豆腐</td>
                <td width="40%" height="30px">18元</td>                
            </tr>
            <tr>
                <td width="20%" height="30px">2</td>
                <td width="40%" height="30px">水煮肉片</td>
                <td width="40%" height="30px">38元</td>                
            </tr>
            <tr>
                <td width="20%" height="30px">3</td>
                <td width="40%" height="30px">宫保鸡丁</td>
                <td width="40%" height="30px">28元</td>                
            </tr>
        </table>
    </div>
    <div id="div3" style="display:none"></div>
    <div id="div4" style="display:none"></div>
    


    
    
    点赞 打赏 评论