中国省市区地址三级联动jQuery插件

中国省市区地址三级联动jQuery插件

这个插件从https://www.jq22.com上下载的插件,并将我个人认为是多与代码删除之后的效果。

除了bootstrap和jquery等相关的必要的css和js文件之外,还需要引入 distpicker.data.js、distpicker.js、main.js这三个文件。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>


<html>
<head>
<title>My JSP 'Address.jsp' starting pagetitle>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
head>

<body>
    
    <div class="jq22-container">
        <div class="container">
            <h4>中国省市区地址三级联动jQuery插件h4>
            <form class="form-inline">
                <div data-toggle="distpicker">
                    <div class="form-group">
                        <label class="sr-only" for="province1">Provincelabel> <select
                            class="form-control" id="province1">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="city1">Citylabel> <select
                            class="form-control" id="city1">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="district1">Districtlabel> <select
                            class="form-control" id="district1">select>
                    div>
                div>
            form>

            <form class="form-inline">
                <div data-toggle="distpicker">
                    <div class="form-group">
                        <label class="sr-only" for="province2">Provincelabel> <select
                            class="form-control" id="province2" data-province="---- 选择省 ----">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="city2">Citylabel> <select
                            class="form-control" id="city2" data-city="---- 选择市 ----">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="district2">Districtlabel> <select
                            class="form-control" id="district2" data-district="---- 选择区 ----">select>
                    div>
                div>
            form>

            <form class="form-inline">
                <div data-toggle="distpicker">
                    <div class="form-group">
                        <label class="sr-only" for="province3">Provincelabel> <select
                            class="form-control" id="province3" data-province="浙江省">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="city3">Citylabel> <select
                            class="form-control" id="city3" data-city="杭州市">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="district3">Districtlabel> <select
                            class="form-control" id="district3" data-district="西湖区">select>
                    div>
                div>
            form>

            <form class="form-inline">
                <div id="distpicker1">
                    <div class="form-group">
                        <label class="sr-only" for="province4">Provincelabel> <select
                            class="form-control" id="province4">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="city4">Citylabel> <select
                            class="form-control" id="city4">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="district4">Districtlabel> <select
                            class="form-control" id="district4">select>
                    div>
                div>
            form>

            <form class="form-inline">
                <div id="distpicker2">
                    <div class="form-group">
                        <label class="sr-only" for="province5">Provincelabel> <select
                            class="form-control" id="province5">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="city5">Citylabel> <select
                            class="form-control" id="city5">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="district5">Districtlabel> <select
                            class="form-control" id="district5">select>
                    div>
                div>
            form>

            <form class="form-inline">
                <div id="distpicker3">
                    <div class="form-group">
                        <label class="sr-only" for="province6">Provincelabel> <select
                            class="form-control" id="province6">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="city6">Citylabel> <select
                            class="form-control" id="city6">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="district6">Districtlabel> <select
                            class="form-control" id="district6">select>
                    div>
                div>
            form>

            <form class="form-inline">
                <div id="distpicker">
                    <div class="form-group">
                        <label class="sr-only" for="province">Provincelabel> <select
                            class="form-control" id="province">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="city">Citylabel> <select
                            class="form-control" id="city">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="district">Districtlabel> <select
                            class="form-control" id="district">select>
                    div>
                    <div class="form-group">
                        <button class="btn btn-primary" id="reset" type="button">Resetbutton>
                        <button class="btn btn-warning" id="reset-deep" type="button">Reset
                            (deep)button>
                        <button class="btn btn-danger" id="destroy" type="button">Destroybutton>
                    div>
                div>
            form>

            <form class="form-inline">
                <div data-toggle="distpicker">
                    <div class="form-group">
                        <label class="sr-only" for="province7">Provincelabel> <select
                            class="form-control" id="province7">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="city7">Citylabel> <select
                            class="form-control" id="city7">select>
                    div>
                div>
            form>

            <form class="form-inline">
                <div data-toggle="distpicker">
                    <div class="form-group">
                        <label class="sr-only" for="province8">Provincelabel> <select
                            class="form-control" id="province8">select>
                    div>
                div>
            form>

            <form class="form-inline">
                <div id="distpicker4">
                    <div class="form-group">
                        <label class="sr-only" for="province9">Provincelabel> <select
                            class="form-control" id="province9">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="city9">Citylabel> <select
                            class="form-control" id="city9">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="district9">Districtlabel> <select
                            class="form-control" id="district9">select>
                    div>
                div>
            form>

            <form class="form-inline">
                <div id="distpicker5">
                    <div class="form-group">
                        <label class="sr-only" for="province10">Provincelabel> <select
                            class="form-control" id="province10">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="city10">Citylabel> <select
                            class="form-control" id="city10">select>
                    div>
                    <div class="form-group">
                        <label class="sr-only" for="district10">Districtlabel> <select
                            class="form-control" id="district10">select>
                    div>
                div>
            form>
        div>
    div>

    <script src="js/jquery-2.1.1.min.js">script>
    <script src="js/bootstrap.js">script>
    <script src="js/Address/distpicker.data.js">script>
    <script src="js/Address/distpicker.js">script>
    <script src="js/Address/main.js">script>
body>

html>

这个是效果图

中国省市区地址三级联动jQuery插件_第1张图片

注:若地址信息有误,可在distpicker.data.js中进行修改

你可能感兴趣的:(前端)