LZYTJX 2021-12-12 11:06 采纳率: 66.7%
浏览 16
已结题

请问如何通过button跳转实现option选中下拉的内容，然后内容出现在新网页上


<head>
<title>1.html</title>
</head>
<body>
<form action="">
                        <select name="请假类型"  style="width:400px ;height: 70px;font-size: 30px;background-color: white;">
                            <option value="" ></option>
                            <option value="volvo"" >事假</option>
                            <option value="saab" ">病假</option>
                            <option value="fiat" ">晚自习请假</option>
                            <option value="audi" ">晨读请假</option>
                        </select>
                    </form>
                    <button >提交请假</button>

</form>
</body>
<script type="text/javascript">
    
</script>

这是1.html

<head>
<title></title>
</head>
<body>
    类型为

</body>

这是2.html
各位xd我想实现前面那些选择那些请假类型，然后点击按钮，跳转到2.html中，选中的数据也能被传过去

  • 写回答

1条回答 默认 最新

  • 前端阿彬 新星创作者: 前端开发技术领域 2021-12-12 13:22
    关注

    如有帮助，麻烦点个【采纳此答案】谢谢了

    img

    img

    1.html

    <!DOCTYPE html>
<html>
     
    <head>
    <title>1.html</title>
    </head>
    <body>
    <form action="">
                            <select name="请假类型" id="Select" style="width:400px ;height: 70px;font-size: 30px;background-color: white;">
                                <option value="" ></option>
                                <option value="volvo"" >事假</option>
                                <option value="saab" ">病假</option>
                                <option value="fiat" ">晚自习请假</option>
                                <option value="audi" ">晨读请假</option>
                            </select>
                        </form>
                        <button id="btn">提交请假</button>
    </form>
    
    
    <script type="text/javascript">
       var btn = document.getElementById('btn')
       var select = document.getElementById('Select')
       btn.onclick = function(){
           
           console.log('00',select.value)
           window.location.href = "./2.html?id="+select.value
       }
    </script>
    </body>
    
</html>
    1. html
    <!DOCTYPE html>
<html>
    <head>
    <title></title>
    </head>
    <body>
        类型为<span id="type"></span>
        
        <script>
           //获取参数的方法
           var url = location.search; //获取url中"?"符后的字串
           var theRequest = new Object();
           if (url.indexOf("?") != -1) {
               var str = url.substr(1);
               strs = str.split("&");
               for (var i = 0; i < strs.length; i++) {
                   theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
               }
           }
           
           console.log(theRequest)
           var label = ''
           switch (theRequest.id) {
               case "volvo":
               label = '事假'
               break;
               case "saab":
               label = '病假'
               break;
               case "fiat":
               label = '晚自习请假'
               break;
               default:
               label = '晨读请假'
               break;
           }
           console.log(label)
           
           var type = document.getElementById('type')
           type.innerHTML = label
        </script>
    </body>
     
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 12月20日
  • 已采纳回答 12月12日
  • 创建了问题 12月12日