js,jsp实现下拉列表的联动

最新推荐文章于 2023-11-30 21:54:54 发布
最新推荐文章于 2023-11-30 21:54:54 发布
阅读量192 收藏
点赞数
文章标签： java javascript ViewUI
原文链接：http://www.cnblogs.com/xutiantian/p/11081509.html
版权 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<link rel="stylesheet" type="text/css"
    href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
    href="${pageContext.request.contextPath}/css/bootstrapValidator.css">
<script type="text/javascript"
    src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>

<body>
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-6 column">
                <!-- οnsubmit="isPoneAvailable()" -->
                <form name="form1" class="form-horizontal"
                    action="${pageContext.request.contextPath}/user/insert.do"
                    method="post" role="form"  onsubmit="return fmsub()">
                    <div class="form-group">
                        <label for="inputEmail1" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input width="80px;" type="text" class="form-control"
                                id="name" name="name" />
                            <font color="red" id="msgname">${msgname}</font>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="password"
                                name="password" />
                            <font color="red" id="msgpassword">${msgpassword}</font>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail2" class="col-sm-2 control-label">联系方式</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="phone"
                                name="phone" />
                            <font color="red" id="msgphone">${msgphone}</font>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">我的职位：</label>
                        <div class="col-sm-10">
                            <select class="form-control" style="width: 300px" id="type"
                                name="type" onChange="set_pt(this, this.form.pt);">
                                <option value="0">请选择...</option>
                                <option value="admin">admin</option>
                                <option value="员工">员工</option>
                                <option value="上海仓">上海仓</option>
                                <option value="北京仓">北京仓</option>
                                <option value="山东仓">山东仓</option>
                                <option value="浙江仓">浙江仓</option>
                                <option value="安徽仓">安徽仓</option>
                                <option value="福建仓">福建仓</option>
                                <option value="江西仓">江西仓</option>
                                <option value="广东仓">广东仓</option>
                                <option value="广西仓">广西仓</option>
                                <option value="海南仓">海南仓</option>
                                <option value="湖北仓">湖北仓</option>
                                <option value="天津仓">天津仓</option>
                                <option value="河北仓">河北仓</option>
                                <option value="山西仓">山西仓</option>
                                <option value="内蒙古仓">内蒙古仓</option>
                                <option value="青海仓">青海仓</option>
                                <option value="陕西仓">陕西仓</option>
                                <option value="甘肃仓">甘肃仓</option>
                                <option value="四川仓">四川仓</option>
                                <option value="云南仓">云南仓</option>
                                <option value="重庆仓">重庆仓</option>
                                <option value="吉林仓">吉林仓</option>
                                <option value="黑龙江仓">黑龙江仓</option>
                            </select>
                            <font color="red" id="msgtype">${msgtype}</font>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">所属上级：</label>
                        <div class="col-sm-10">
                            <select class="form-control" style="width: 300px" id="pt"
                                name="pt">
                                <option value="0">请选择...</option>
                            </select>
                            <font color="red" id="msgpt">${msgpt}</font>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-default">添加</button>
                </form>

            </div>
            <div class="col-md-6 column"></div>
        </div>
    </div>
</body>
<script>
//对input中数据进行判断
function fmsub(){
    var name = $("#name").val();
    console.log(name);
    var phone = $("#phone").val();
    var password = $("#password").val();
    var type = $("#type").val();
    var pt = $("#pt").val();
    var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
    if (name == null || name == "") {
        document.getElementById("msgname").innerHTML = "*姓名不能为空";
        return false;
    }
    if (password == null || password == "") {
        document.getElementById("msgpassword").innerHTML = "*密码不能为空";
        return false;
    }
    if (phone == null || phone == "") {
        document.getElementById("msgphone").innerHTML = "*手机号码不能为空";
        return false;
    }
    if (!myreg.test($("#phone").val())) {
        document.getElementById("msgphone").innerHTML = "*请填写正确的11位手机号";
        return false;
    }
    if (type == 0) {
        document.getElementById("msgtype").innerHTML = "*请输入当前职位";
        return false;
    }
    if (type != "admin") {
        if (pt== 0) {
            document.getElementById("msgpt").innerHTML = "*请输入所属上级";
            return false;
        }
    }    
}

/*二级下拉列表*/
cities = new Object();
cities['admin']
cities['员工'] = new Array('北京仓', '山东仓', '浙江仓', '安徽仓', '云南仓', '江西仓', '广东仓', '广西仓', '海南仓',
    '湖北仓', '天津仓', '河北仓', '山西仓', '内蒙古仓', '吉林仓', '青海仓', '陕西仓', '甘肃仓', '重庆仓', '四川仓', '黑龙江仓','上海仓');
cities['北京仓'] = new Array('admin');
cities['山东仓'] = new Array('admin');
cities['浙江仓'] = new Array('admin');
cities['安徽仓'] = new Array('admin');
cities['云南仓'] = new Array('admin');
cities['江西仓'] = new Array('admin');
cities['广东仓'] = new Array('admin');
cities['广西仓'] = new Array('admin');
cities['海南仓'] = new Array('admin');
cities['湖北仓'] = new Array('admin');
cities['河北仓'] = new Array('admin');
cities['山西仓'] = new Array('admin');
cities['内蒙古仓'] = new Array('admin');
cities['吉林仓'] = new Array('admin');
cities['青海仓'] = new Array('admin');
cities['陕西仓'] = new Array('admin');
cities['甘肃仓'] = new Array('admin');
cities['重庆仓'] = new Array('admin');
cities['四川仓'] = new Array('admin');
cities['黑龙江仓'] = new Array('admin');
cities['上海仓'] = new Array('admin');
function set_pt(type, pt) {
    var pv, cv;
    var i, ii;

    pv = type.value;
    cv = pt.value;

    pt.length = 1;

    if (pv == '0') return;
    if (typeof(cities[pv]) == 'undefined') return;

    for (i = 0; i < cities[pv].length; i++) {
        ii = i + 1;
        pt.options[ii] = new Option();
        pt.options[ii].text = cities[pv][i];
        pt.options[ii].value = cities[pv][i];
    }
}
</script>
<script type="text/javascript"
    src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>

</html>

 

转载于:https://www.cnblogs.com/xutiantian/p/11081509.html

weixin_30680385
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用ajax实现的jsp二级联动下拉列表
12-24
用ajax实现的jsp二级联动下拉列表，使用异步交互的二级联动堪称jsp革命性变动。以前的联动大都是把所有的数据取出来放在javascript中，就一个字------烦
实现jsp页面二级下拉框联动，实时读取数据库数据
12-31
实现jsp页面二级下拉框联动，实时读取数据库数据实现jsp页面二级下拉框联动，实时读取数据库数据
js+jsp下拉列表二级联动简单的
12-09
这个是修改的一个js下拉列表的二级联动！！希望大家学习，下了个居然不能用，比较气愤，所以就改了改，成功了。希望大家学习！其实也没什么就是获得下拉列表中的选中的值。然后比对赋值就行了！
在一个jsp页面实现二级下拉框联动，实时读取数据库数据
机器喵的休闲生活
04-26 8073
在一个jsp页面实现二级下拉框联动，实时读取数据库数据，这个方法非常使用，只需要修改很小的地方就可以使用。设计的文件，serch.jsp，main.js，bytetostr.js，先讲一下main.js，这是javascript，其中注意修改jsp页面名称。  function findObject(fName,initValue)...{   var xmlhttp = new 
jsp和JavaScript的二级联动下拉菜单的实现
yingjinsheng的专栏
09-11 2388
9月8日，看到网站上有人在写用js来写二级菜单，可是都没有放在jsp中，所以本人就在jsp中写了一个例子，作为参考 ，同时对于下拉菜单，必须要知道下拉菜单的js基本操作。 JavaScript对下拉菜单的基本操作： 1.获取一个下拉菜单对象 var select = document.getElementById("selectid");  2.在下拉菜单中添加一个选项 var option = ...
js+jsp 联动下拉列表框
12-06
综上所述，js+jsp实现的联动下拉列表框是Web开发中常用的功能之一，它能够极大地提升用户的交互体验，并简化开发者的工作量。通过对上述代码的理解和实践，我们可以更好地掌握这种联动机制的实现方式。
纯JSP+DWR实现三级联动下拉选择菜单实现技巧
10-27
在HTML中，我们需要创建三个下拉列表，分别对应国家、省份和城市，并且通过JavaScript事件监听器与DWR接口交互，以更新下拉列表的内容。 在JavaScript中，我们可能会有一个函数，例如`updateProvinces`，当用户在...
jQuery插件datalist实现很好看的input下拉列表
10-23
本文介绍的内容是关于如何利用jQuery实现HTML5中定义的input元素类型为datalist的下拉列表功能。首先，我们需要了解datalist是什么。Datalist是HTML5中的一个表单元素，它能为输入字段提供一个自动完成的下拉列表。...
实时监控input框,实现输入框与下拉框联动的实例
08-28
下面小编就为大家分享一篇实时监控input框,实现输入框与下拉框联动的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jsp页面中的下拉列表
一个2年工作经验的程序测试员
02-15 2701
在WEB开发过程中，我们经常遇到信息修改的功能需求。这时我们给用户提供一个JSP页面，展示出当前的信息并允许用户重新设置新值。而在这个页面中，一般是少不了下拉列表的。至于它的处理方式，我以前想过一种，思路如下：在页面设置一个隐藏域，用于保存后台传递过来的值；然后在页面输出下拉列表，这时它的值是默认的，即第一项；在js代码段中获取隐藏域中的值并在循环中判断它是否等于下拉项的id值，如果相等就设置该项...
浅谈JSP表单中下拉列表的实现
12-18
资源讲述的是jsp的表单中的下拉列表的实现
jsp导航条 下拉菜单
11-11
jsp有下拉的导航条 自己写的，仅供参考，不好请留言
如何实现省市关联的下拉列表
穆雄雄的博客
12-09 1862
前言：在某些电商网站或者APP中，通常填写地址时，会有这样的功能：当我们选择的省份是“山东”时，则城市的下拉列表里所展示的便是山东的城市，当选择的省份是“山西”时，城市的下拉列表所展示的...
JSP Select 下拉列表可以下拉不可编辑
最新发布
安潞的专栏
11-30 257
getPriceList.action',lazy:true,value:'居民单价'"添加属性editable=false就可以了。
jsp下拉框级联查询以及java代码实现
凉梦的博客
08-04 5409
点击地点，选择学校，级联建筑物与房间，效果如下 前台使用jsp页面的代码，key对应的是输入框额标题，itemList是后台查询的值 <div class="searchbody"> <dl> <fmt:message key="oaEquipment.new.storage"/>： <cus:SearchFilterTag name="orgcode" id="orgcode" op="eq" type="string" itemLi
java jsp下拉列表框_用JSP实现下拉列表框三级联动效果
weixin_42231590的博客
02-16 1757
一、在数据库数据库中建立三个表1.city字段：districtname，locationid，districtid2.province字段：locationid，locationname3.village字段：villageid,villagename,districtid二、代码如下：pageEncoding="gb2312"%>jsp实现三级联动的下拉列表框效果Connection c...
jsp动态下拉菜单,如何实现jsp下拉列表,jsp下拉列表怎么实现
程序员小雨的博客
07-08 5284
JSP 下拉框实现值联动实例
热门推荐
王小磊
04-15 1万+
下拉框值联动测试 var fjyt=[["NCR","DC","OTHER"], ["NCR","DC","OTHER"], ["NCR","DC","OTHER"], ["TZ"], ["SOP"] ]; //描述 var fjyt_des=[["NCR记录","尺寸记录","其他附件"], ["NCR记录","尺寸记
jsp页面下拉列表怎么写
08-05
在 JSP 页面中，你可以使用 HTML 的 `<select>` 元来创建一个下拉列表。下面是一个简单的示例： ```jsp <option value="apple">Apple <option value="banana">Banana <option value="orange">Orange ``` 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值