JS 二级联动页面问题

JavaScript023

JS 二级联动页面问题,第1张

修改后的JSP代码如下:

<%@ 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">

<link rel="stylesheet" type="text/css" href="CSS/css_style.css" />

<title>恒丰银行昆明分行外部评级机构管理系统</title>

</head>

<script>

    var arr = new Array()

    arr[0] = "昆明市,五华区,盘龙区,官渡区,西山区,东川区,呈贡县,晋宁县,富民县,宜良县,石林彝族自治县,嵩明县,禄劝彝族苗族自治县,寻甸回族彝族自治县,安宁市"

    arr[1] = "曲靖市,麒麟区,马龙县,陆良县,师宗县,罗平县,富源县,会泽县,沾益县,宣威市"

    arr[2] = "玉溪市,红塔区,江川县,澄江县,通海县,华宁县,易门县,峨山彝族自治县,新平彝族傣族自治县,元江哈尼族彝族傣族自治县"

    arr[3] = "昭通市,昭阳区,鲁甸县,巧家县,盐津县,大关县,永善县,绥江县,镇雄县,彝良县,威信县,水富县"

    arr[4] = "丽江市,隆阳区,施甸县,腾冲县,龙陵县,昌宁县"

    arr[5] = "普洱市,古城区,玉龙纳西族自治县,永胜县,华坪县,宁蒗彝族自治县"

    arr[6] = "临沧市,翠云区,普洱哈尼族彝族自治县,墨江哈尼族自治县,景东彝族自治县,景谷傣族彝族自治县,镇沅彝族哈尼族拉祜族自治县,江城哈尼族彝族自治县,孟连傣族拉祜族佤族自治县,澜沧拉祜族自治县,西盟佤族自治县"

    arr[7] = "德宏市,临翔区,凤庆县,云县,永德县,镇康县,双江拉祜族佤族布朗族傣族自治县,耿马傣族佤族自治县,沧源佤族自治县"

    arr[8] = "瑞丽市,潞西市,梁河县,盈江县,陇川县"

    arr[9] = "泸水县,福贡县,贡山独龙族怒族自治县,兰坪白族普米族自治县"

    arr[10] = "香格里拉县,德钦县,维西傈僳族自治县"

    arr[11] = "大理市,漾濞彝族自治县,祥云县,宾川县,弥渡县,南涧彝族自治县,巍山彝族回族自治县,永平县,云龙县,洱源县,剑川县,鹤庆县"

    arr[12] = "楚雄市,双柏县,牟定县,南华县,姚安县,大姚县,永仁县,元谋县,武定县,禄丰县"

    arr[13] = "个旧市,开远市,蒙自县,屏边苗族自治县,建水县,石屏县,弥勒县,泸西县,元阳县,红河县,金平苗族瑶族傣族自治县,绿春县,河口瑶族自治县"

    arr[14] = "文山县,砚山县,西畴县,麻栗坡县,马关县,丘北县,广南县,富宁县"

    arr[15] = "景洪市,勐海县,勐腊县"

 

    function init(index) {

        var city = document.getElementById("city_" + index)

        var cityArr = arr[0].split(",")

        for (var i = 0 i < cityArr.length i++) {

            city[i] = new Option(cityArr[i], cityArr[i])

        }

    }

 

    function getCity(comp) {

     //获得控件序号(1..*)

     var index = comp.id.charAt(comp.id.length - 1)

     var province = document.getElementById("province_" + index)

        var city = document.getElementById("city_" + index)

        var cityArr = arr[province.selectedIndex].split(",")

 

        city.length = 0

        //将城市数组中的值填充到城市下拉框中

        for (var i = 0 i < cityArr.length i++) {

            city[i] = new Option(cityArr[i], cityArr[i])

        }

    }

</script>

<script>

function displayResult(){

    var table=document.getElementById("table-7")

    var rows = table.rows.length

    var currRow = rows - 1

    var row = table.insertRow(currRow)

    var cell1=row.insertCell(0)

    var cell2=row.insertCell(1)

    var index = currRow - 2

    

    cell1.innerHTML="+抵押物"

    cell2.innerHTML="抵押物证号:<input name='clot_no_" + index + "'><input type='button' value='+' onClick='displayResult()'><br/>"

+"抵押物归属地:"

+"<select id='province_" + index + "' size=1 onchange='getCity(this)'>"

+"<option value=0>昆明</option>"

+"<option value=1>曲靖</option>"

+"<option value=2>玉溪</option>"

+"<option value=3>昭通</option>"

+"<option value=4>保山</option>"

+"<option value=5>丽江</option>"

+"<option value=6>普洱</option>"

+"<option value=7>临沧</option>"

+"<option value=8>德宏</option>"

+"<option value=9>怒江</option>"

+"<option value=10>迪庆</option>"

+"<option value=11>大理</option>"

+"<option value=12>楚雄</option>"

+"<option value=13>红河</option>"

+"<option value=14>文山</option>"

+"<option value=15>版纳</option>"

+"</select>"

+"<select id='city_" + index + "' style='width: auto'></select><br/>"

+"抵押物地址:<input name='clotaddr" + index + "'>"

init(index)

}

</script>

 

<body onload="init(1)">

    <div id="wrapper">

        <header class="SiteHeader"> <img src="PIC/HF_LOGO.png"

            alt="HFKM-KJB" style="width: 89px height: 34px"> </header>

 

        <aside class="NavSidebar"> <nav>

        <h2>当前用户</h2>

        <ul>

            <li>用户名:</li>

            <li>角色:</li>

        </ul>

        </nav> <nav>

        <h2>功能导航</h2>

        <ul>

        <%

        String mana_type=session.getAttribute("mana_type").toString()

        String menu=""

        if (mana_type.equals("系统管理员")) {

            menu="<li><a href=\"showOrg.do\">查看评估机构</a></li><li><a href=\"CreateOrg.jsp\">新增评估机构</a></li><li><a href=\"showPle_done.do\">查看已抽签抵押物</a></li><li><a href=\"showPle.do\">查看未抽签抵押物</a></li><li><a href=\"showPle.do\">抽签结果查看</a></li>"

        } else

        {

            menu="<li><a href=\"showOrg.do\">查看评估机构</a></li><li><a href=\"showPle_done.do\">查看已抽签抵押物</a></li><li><a href=\"showPle.do\">查看未抽签抵押物</a></li><li><a href=\"CreatePle.jsp\">新增抵押物</a></li><li><a href=\"showPle.do\">抵押物抽签</a></li>"

 

        }

        %>

                <%=menu%>

        </ul>

        </nav> <section>

        <h2>系统设置</h2>

        <ul>

            <li><a href="">修改密码</a></li>

            <li><a href="logout.do">退出登录</a></li>

        </ul>

        </section> <br />

        <br />

        <br />

        <br />

        </aside>

 

        <main> <article class="Content"> <header

            class="ArticleHeader"> </header>

        <h3 align=center>新增业务信息</h3>

        <br />

 

                <form name="frmCrePle" action="CrePle.do">

            <table border="1" id="table-7">

                <tr>

                    <td>借款人名称</td>

                    <td><input name="loan_na"></td>

                </tr>

                <tr>

                    <td>借款人身份证号/统一社会信用代码</td>

                    <td><input name="loan_no"></td>

                </tr>

                <tr>

                    <td>抵押人名称</td>

                    <td><input name="plg_na"></td>

                </tr>

                <tr>

                    <td id="td_na_1">抵押物</td>

                    <td id="clot_no">

                        抵押物证号:<input name="clot_no_1"><input type="button" value="+" onClick="displayResult(this)"><br/>

                        抵押物归属地:

                        <select id="province_1" size=1 onchange="getCity(this)">

                            <option value=0>昆明</option>

                            <option value=1>曲靖</option>

                            <option value=2>玉溪</option>

                            <option value=3>昭通</option>

                            <option value=4>保山</option>

                            <option value=5>丽江</option>

                            <option value=6>普洱</option>

                            <option value=7>临沧</option>

                            <option value=8>德宏</option>

                            <option value=9>怒江</option>

                            <option value=10>迪庆</option>

                            <option value=11>大理</option>

                            <option value=12>楚雄</option>

                            <option value=13>红河</option>

                            <option value=14>文山</option>

                            <option value=15>版纳</option>

                    </select> 

                    <select id="city_1" style="width: auto"></select><br/>

                    抵押物地址:<input name="clotaddr_1">

                    </td>

                </tr>

 

                <tr align="center">

                    <td colspan="2"><input type="submit" value="提交"></td>

                </tr>

            </table>

        </form>

 

        </article> </main>

 

        <footer>

        <p class="Disclaimer">

            © 2017 恒丰银行昆明分行<br> Disign by KJB-TianSIR

        </p>

        </footer>

    </div>

</body>

</html>

“bootstrap-select.js ”联动改变方式如下:

1、多选效果

可以设置最多只能选几个

2、图文结合的效果

3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)

输入内容前

输入空格搜索出全部

滚动条滑动到底部自动加载剩余项

输入文本动态去后台过滤

更高级的用法如:

代码示例如下:

1、多选效果

select2的多选很简单,设置一个属性就好了。

<script src="~/Scripts/jquery-1.10.2.js"></script>

<script src="~/Content/bootstrap/js/bootstrap.js"></script>

<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> 

<script src="~/Content/select2-master/dist/js/select2.js"></script>

<link href="~/Content/select2-master/dist/css/select2.css" rel="stylesheet" />  <select id="sel_menu2" multiple="multiple" class="form-control">

         <optgroup label="系统设置">

              <option value="1">用户管理</option>

              <option value="2">角色管理</option>

              <option value="3">部门管理</option>

              <option value="4">菜单管理</option>

         </optgroup>

         <optgroup label="订单管理">

              <option value="5">订单查询</option>

              <option value="6">订单导入</option>

              <option value="7">订单删除</option>

              <option value="8">订单撤销</option>

         </optgroup>

         <optgroup label="基础数据">

              <option value="9">基础数据维护</option>

          </optgroup>

     </select>  //多选

 $("#sel_menu2").select2({        

 tags: true,        

 maximumSelectionLength: 3  //最多能够选择的个数    })

2、图文结合的效果

<select id="sel_menu" class="js-example-templating js-states form-control">

             <optgroup label="系统设置">

                 <option value="1">用户管理</option>

                 <option value="2">角色管理</option>

                 <option value="3">部门管理</option>

                 <option value="4">菜单管理</option>

             </optgroup>

             <optgroup label="订单管理">

                 <option value="5">订单查询</option>

                 <option value="6">订单导入</option>

                 <option value="7">订单删除</option>

                 <option value="8">订单撤销</option>

             </optgroup>

             <optgroup label="基础数据">

                 <option value="9">基础数据维护</option>

             </optgroup>

         </select> $(function () {    

 //带图片    

 $("#sel_menu").select2({        

 templateResult: formatState,        

 templateSelection: formatState    

 })

 })

 function formatState(state) {    

 if (!state.id) { return state.text }    

 var $state = $(      

 '<span><img src="/content/images/' + state.element.value.toLowerCase() + '.ico" class="img-flag" /> ' + state.text + '</span>'    

 )    

 return $state}

3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)

<select id="sel_menu3" class="js-data-example-ajax form-control">

      <option value="3620194" selected="selected">请选择</option>

 </select> $(function () {    //远程筛选

    $("#sel_menu3").select2({

        ajax: {

            url: "/Home/GetProvinces",

            dataType: 'json',

            delay: 250,

            data: function (params) {                

            return {

                    q: params.term, // search term                    page: params.page

                }

            },

            processResults: function (data, params) {

                params.page = params.page || 1                

                return {

                    results: data.items,

                    pagination: {

                        more: (params.page * 10) < data.total_count

                    }

                }

            },

            cache: true

        },

        escapeMarkup: function (markup) { return markup }, // let our custom formatter work

        minimumInputLength: 1,

        templateResult: formatRepoProvince, // omitted for brevity, see the source of this page

        templateSelection: formatRepoProvince // omitted for brevity, see the source of this page    })

}) function formatRepoProvince(repo) {    

if (repo.loading) return repo.text    

var markup = "<div>"+repo.name+"</div>"    

return markup

}

这里有要注意的一个地方就是processResults属性对应的方法有一个more属性用于是否分页显示的,这里的值要和你需要一次显示的值的条数匹配。

后台对应的方法如下:

public List<string> lstProvince = new List<string>() {"北京市","天津市","重庆市","上海市","河北省","山西省","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","海南省","四川省","贵州省","云南省","陕西省","甘肃省","青海省","台湾省","内蒙古自治区","广西壮族自治区","西藏自治区","宁夏回族自治区","新疆维吾尔自治区","香港特别行政区","澳门特别行政区" }        

public JsonResult GetProvinces(string q, string page)

        {            

        var lstRes = new List<Province>()            

        for (var i = 0 i < 30 i++)            

        {                

        var oProvince = new Province()                

        oProvince.id = i                

        oProvince.name = lstProvince[i]                

        lstRes.Add(oProvince)            

        }            

        if (!string.IsNullOrEmpty(q.Trim()))            

        {                

        lstRes = lstRes.Where(x => x.name.Contains(q)).ToList()            }            

        var lstCurPageRes = string.IsNullOrEmpty(page) ? lstRes.Take(10) : lstRes.Skip(Convert.ToInt32(page) * 10 - 10).Take(10)            

        return Json(new { items = lstCurPageRes, total_count = lstRes.Count }, JsonRequestBehavior.AllowGet)        }