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;