To use this function, you need to use the contents of the layui folder, so you can’t just put layui.css and layui.jsIntroduced, it must be obtained from the layui folder
Display effect
Code section
DOCTYPE html>
<html >
<head >
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title >layareatitle>
<link rel="stylesheet" href="./layui/css/layui.css">
head>
<body >
<div class="layui-form">
<div class="layui-form-item" id="area-picker">
<div class="layui-form-label">Addressdiv>
<div class="layui-input-inline" style="width: 200px;">
<select name="province" class="province-selector" data-value="Guangdong Province" lay-filter="province-1">
<option value="">Please select provinceoption>
select>
div>
<div class="layui-input-inline" style="width: 200px;">
<select name="city" class="city-selector" data-value="Shenzhen" lay-filter="city-1">
<option value="">Please select the cityoption>
select>
div>
<div class="layui-input-inline" style="width: 200px;">
<select name="county" class="county-selector" data-value="Longgang District" lay-filter="county-1">
<option value="">Please select the areaoption>
select>
div>
div>
div>
<script src="./layui/layui.js"> script>
<script >
//Configuration plugin Directory
layui.config({
base: './mods/'
, version: '1.0'
});
//Generally written directly in a js file
layui.use(['layer' , ' span>form' , 'layarea'], function () {
var layer = layui .layer
, form = layui.form
, layarea = layui.layarea;
layarea.render({
elem: '#area-picker',
change: function (res) {
//Select result
console.log(res);
}
});
});
script>
body>
html>
DOCTYPE html>
<html >
<head >
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title >layareatitle>
<link rel="stylesheet" href="./layui/css/layui.css">
head>
<body >
<div class="layui-form">
<div class="layui-form-item" id="area-picker">
<div class="layui-form-label">Addressdiv>
<div class="layui-input-inline" style="width: 200px;">
<select name="province" class="province-selector" data-value="Guangdong Province" lay-filter="province-1">
<option value="">Please select provinceoption>
select>
div>
<div class="layui-input-inline" style="width: 200px;">
<select name="city" class="city-selector" data-value="Shenzhen" lay-filter="city-1">
<option value="">Please select the cityoption>
select>
div>
<div class="layui-input-inline" style="width: 200px;">
<select name="county" class="county-selector" data-value="Longgang District" lay-filter="county-1">
<option value="">Please select the areaoption>
select>
div>
div>
div>
<script src="./layui/layui.js"> script>
<script >
//Configuration plugin Directory
layui.config({
base: './mods/'
, version: '1.0'
});
//Generally written directly in a js file
layui.use(['layer' , ' span>form' , 'layarea'], function () {
var layer = layui .layer
, form = layui.form
, layarea = layui.layarea;
layarea.render({
elem: '#area-picker',
change: function (res) {
//Select result
console.log(res);
}
});
});
script>
body>
html>