area.html 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>省市县区选择区</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9. <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
  10. <link rel="stylesheet" href="../css/public.css" media="all">
  11. <link rel="stylesheet" href="../lib/lay-module/step-lay/step.css" media="all">
  12. </head>
  13. <body>
  14. <div class="layuimini-container">
  15. <div class="layuimini-main">
  16. <blockquote class="layui-elem-quote">
  17. 省市县区三级联动下拉选择器使用开源项目:layarea<br>
  18. <a href="https://github.com/fesiong/layarea" target="_blank" class="layui-btn layui-btn-danger">layarea</a>
  19. </blockquote>
  20. <form class="layui-form" action="" style="padding:20px;">
  21. <div class="layui-form-item" id="area-picker">
  22. <div class="layui-form-label">网点地址</div>
  23. <div class="layui-input-inline" style="width: 200px;">
  24. <select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
  25. <option value="">请选择省</option>
  26. </select>
  27. </div>
  28. <div class="layui-input-inline" style="width: 200px;">
  29. <select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
  30. <option value="">请选择市</option>
  31. </select>
  32. </div>
  33. <div class="layui-input-inline" style="width: 200px;">
  34. <select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
  35. <option value="">请选择区</option>
  36. </select>
  37. </div>
  38. </div>
  39. </form>
  40. <pre class="layui-code">
  41. layui.use(['layer', 'form', 'layarea'], function () {
  42. var layer = layui.layer
  43. , form = layui.form
  44. , layarea = layui.layarea;
  45. layarea.render({
  46. elem: '#area-picker',
  47. // data: {
  48. // province: '广东省',
  49. // city: '深圳市',
  50. // county: '龙岗区',
  51. // },
  52. change: function (res) {
  53. //选择结果
  54. console.log(res);
  55. }
  56. });
  57. });
  58. </pre>
  59. </div>
  60. </div>
  61. <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
  62. <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
  63. <script>
  64. layui.use(['layer', 'form', 'layarea'], function () {
  65. var layer = layui.layer
  66. , form = layui.form
  67. , layarea = layui.layarea;
  68. layarea.render({
  69. elem: '#area-picker',
  70. // data: {
  71. // province: '广东省',
  72. // city: '深圳市',
  73. // county: '龙岗区',
  74. // },
  75. change: function (res) {
  76. //选择结果
  77. console.log(res);
  78. }
  79. });
  80. });
  81. </script>
  82. </body>
  83. </html>