提交form表单时弹出下拉框，使用js写

最新推荐文章于 2023-03-22 00:16:19 发布

原创最新推荐文章于 2023-03-22 00:16:19 发布 · 727 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

# js

java 同时被 3 个专栏收录

16 篇文章

订阅专栏

15 篇文章

订阅专栏

html

5 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript实现一个带有下拉菜单的弹窗功能，并进行表单验证。通过CSS设置样式，JavaScript控制弹窗显示与隐藏，以及表单字段的验证，确保用户输入有效信息。

=================================css======================

<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.window {
width: 20%;
padding-bottom: 20px;
background-color: #fff;
position: fixed;
display: none;
margin-bottom: 100px;
border: 1px solid #E0DFDF;
}
.add_btn {
height: 1400px;
cursor: pointer;
}
.btn_text {
width: 80px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -20px;
background-color: #FDDB54;
}
.border_add_nav {
width: 100%;
}
.border_add_nav_box {
width: 90%;
margin: 0 auto;
font-size: 16px;
}
.border_add_main_content {
width: 100%;
margin-left: 5%;
margin-bottom: 3%;
overflow: hidden;
overflow-y: auto;
}
.border_add_btn_box {
width: 90%;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.add_title {
color: #20AAE4;
margin-top: 10px;
}
.selectLabel,
.selectName {
margin-top: 30px;
float: left;
}
.selectName {
height: 40px;
text-align: center;
outline: none;
appearance: none;
-moz-appearance: none;
border-radius: 4px;
border: 1px solid #c8cccf;
color: #000;
width:218px;
padding:0px;
margin:10px 0px 0px 0px;
}
.cancel,
.save {
width: 60px;
height: 30px;
line-height: 30px;
float: left;
color: #fff;
text-align: center;
border-radius: 5%;
cursor: pointer;
}
.cancel {
margin-right: 10px;
background: #E0DFDF;
}
.save {
background: #20AAE4;
}
.mask {
position: absolute;
top: 0;
display: none;
background-color: rgba(0, 0, 0, 0.5);
}
</style>

<form method="post" name="form" action="**/**" id="form-mod">

<input type="text" name="input" readonly style="border: none;"/>

<input type="text" name="name" readonly style="border: none;"/>

<input type="text" name="rank" value="8" readonly style="border: none;"/>

<div style="text-align:center;">
   <button class="button" type="button" onclick="return check()" >
       <span>申请</span>
   </button>  
       </div>


<--==============下面html是弹框==========-->
           <div class="mask"></div>
           <div class="window" id="center">
           <div class="border_add_nav">
               <div> </div>
               <div class="border_add_nav_box flex-container">
               <span class="add_title">下拉框</span>
               
               </div>
           </div>
           <div class="border_add_main_content">
               <div class="border_add_main_content_box">
               <span class="selectLabel"></span>
               <select name="select" class="selectName">
                           <option value="">===请选择===</option>
                           <option value="1">1</option>
                           <option value="2">2</option>
                       </select>
               </div>
           </div>
           <div class="border_add_btn_box">
               <div class="pull-right" style="float:right;">
               <div class="save" id="pull-rightClose">确定</div>
               </div>
           </div>
           </div>

   </form>

======================js=======================

<script>

function check() {
   var reg=/^[1-9]\d*$|^0$/;
   var from=document.form;

   if(from.name.value=="" || from.name.value.length == 0) {
       alert("请填写姓名!");
       return false;
   }

       //弹出下拉框
   if($('#rank').val()==8){
       $('.mask').css('display', 'block');
$('.mask').css('width', $(window).width());
$('.mask').css('height', $(document).height());
popCenterWindow();

   }

}


   //获取窗口的高度
var windowHeight;
//获取窗口的宽度
var windowWidth;
//获取弹窗的宽度
var popWidth;
//获取弹窗高度
var popHeight;

function init() {
   windowHeight = $(window).height();
   windowWidth = $(window).width();
   popHeight = $(".window").height();
   popWidth = $(".window").width();
}
//关闭窗口的方法，提交表单
function closeWindow() {
   $("#pull-rightClose").click(function () {

//判断下拉框是否已选择
       if($('.selectName').val()=="" || $('.selectName').val().length == 0) {
           alert("请填写申请科室!");
           return false;
       }else{

//将下拉框选择的值赋给input，方便传到后台
           document.form.input.value=$('.selectName').val();
           $('.window').hide("slow");
       $('.mask').css('display', 'none');

//表单提交
       $('form').submit();
       return true;
       }
   });
}

   //定义弹出居中窗口的方法
function popCenterWindow() {
   init();
   //计算弹出窗口的左上角X的偏移量
   var popX = (windowWidth - popWidth) / 2;
   // 计算弹出窗口的左上角Y的偏移量为窗口的高度 - 弹窗高度 / 5 + 被卷去的页面的top
   var popY = (windowHeight - popHeight) / 5 + $(document).scrollTop();
   //设定窗口的位置
   $("#center").css("top", popY).css("left", popX).slideToggle("fast");
   closeWindow();
}


</script>