Three level linkage effect of provincial and urban areas, using city picker

City picker can help us to complete the three-level linkage effect of provincial and urban areas conveniently and quickly. It is simple and fast. We can download the plug-in on the official website: http://tshi0912.github.io/city-picker/
Download this: city-picker-master.zip
After decompression:

Copy the contents of dist to the project
Here is a simple use
Four files need to be imported before using the city picker plug-in (the import order should not be wrong):

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/self/city-picker.data.js"></script>
<script type="text/javascript" src="js/self/city-picker.js"></script>
<link rel="stylesheet" href="css/city-picker.css" />

html implementation:

<body>
        <div style="position: relative;">
        <input type="text" name="area" data-toggle="city-picker" size="80" />
        </div>
    </body>

Just set the style in the tag: Data toggle = "city picker";
Using JS implementation:

<body>
        <div style="position: relative;">
        <input type="text" name="area" id="area" size="80" />
        </div>
    </body>
    <script>
        $("#area").citypicker();
    </script>

Add citypicker attribute to tag in JS
Clear the city picker selection:

<body>
        <div style="position: relative;">
            <input type="text" name="area" id="area" size="80" />
            <button id="btn">Eliminate</button>
        </div>
    </body>
    <script>
        $(function() {
            $("#area").citypicker();
            $("#btn").click(function() {
                $("#area").citypicker('reset');
            })
        })
    </script>

When we click the clear button, the information of the province or city selected in the input box will be cleared;
Dynamic assignment:

    <body>
        <div style="position: relative;">
            <input type="text" name="area" id="area" size="80" />
            <button id="btn">assignment</button>
        </div>
    </body>
    <script>
        $("#area").citypicker();
        $("#btn").click(function() {
            //reset method and destroy method need to be executed before assignment
            $("#area").citypicker('reset');
            $("#area").citypicker("destroy");
            $("#area").citypicker({
                province : "XX province",
                city : "XX city",
                district : 'XX county'
            });
        })
    </script>

When we click the assign button, the value in the input box will be replaced by the value we set in JS code;

Keywords: Javascript github JQuery Attribute

Added by L0j1k on Thu, 02 Jan 2020 00:33:11 +0200