Home > Web Front-end > JS Tutorial > body text

jquery implements secondary linkage drop-down selection based on layui

小云云
Release: 2018-01-06 11:29:36
Original
15400 people have browsed it

The drop-down selection function is very common to us. This article mainly introduces jquery to implement two-level linkage drop-down selection (province and city selection) based on layui. It has certain practical value. Friends who need it can refer to it. I hope it can help everyone.

Let’s take a look at the simple effect first

##Go directly to the code


html part (I took the value of the value in the drop-down box from the database)


<p class="layui-form-item">
 <label class="layui-form-label">城市</label>
 <p class="layui-input-inline">
  <select name="city" lay-filter="province">
   <option value=""></option>
   <option value="11">北京市</option>
   <option value="12">天津市</option>
   <option value="13">河北省</option>
   <option value="14">山西省</option>
   <option value="15">内蒙古自治区</option>
   <option value="21">辽宁省</option>
   <option value="22">吉林省</option>
   <option value="23">黑龙江省</option>
   <option value="31">上海市</option>
   <option value="32">江苏省</option>
   <option value="33">浙江省</option>
   <option value="34">安徽省</option>
   <option value="35">福建省</option>
   <option value="36">江西省</option>
   <option value="37">山东省</option>
   <option value="41">河南省</option>
   <option value="42">湖北省</option>
   <option value="43">湖南省</option>
   <option value="44">广东省</option>
   <option value="45">广西壮族自治区</option>
   <option value="46">海南省</option>
   <option value="50">重庆市</option>
   <option value="51">四川省</option>
   <option value="52">贵州省</option>
   <option value="53">云南省</option>
   <option value="54">西藏自治区</option>
   <option value="61">陕西省</option>
   <option value="62">甘肃省</option>
   <option value="63">青海省</option>
   <option value="64">宁夏回族自治区</option>
   <option value="65">新疆维吾尔自治区</option>
   <option value="71">台湾省</option>
   <option value="81">香港特别行政区</option>
   <option value="82">澳门特别行政区</option>
  </select>
 </p>
 <p class="layui-input-inline">
  <select name="city" id="city">
   <option value=""></option>
  </select>
 </p>
</p>
Copy after login

js operation part


form.on(&#39;select(province)&#39;, function(data){
   $.getJSON("/api/getCity?pid="+data.value, function(data){
    var optionstring = "";
    $.each(data.data, function(i,item){
     optionstring += "<option value=\"" + item.code + "\" >" + item.name + "</option>";
    });
    $("#city").html(&#39;<option value=""></option>&#39; + optionstring);
    form.render(&#39;select&#39;); //这个很重要
   });
});
Copy after login

The data format json returned by the background


{
 "status": 200,
 "message": "result",
 "data": [
  {
   "code": "3418",
   "name": "宣城市",
   "province": "34"
  },
  {
   "code": "3417",
   "name": "池州市",
   "province": "34"
  },
  {
   "code": "3416",
   "name": "亳州市",
   "province": "34"
  },
  {
   "code": "3415",
   "name": "六安市",
   "province": "34"
  },
  {
   "code": "3413",
   "name": "宿州市",
   "province": "34"
  },
  {
   "code": "3412",
   "name": "阜阳市",
   "province": "34"
  },
  {
   "code": "3411",
   "name": "滁州市",
   "province": "34"
  },
  {
   "code": "3408",
   "name": "安庆市",
   "province": "34"
  },
  {
   "code": "3407",
   "name": "铜陵市",
   "province": "34"
  },
  {
   "code": "3406",
   "name": "淮北市",
   "province": "34"
  },
  {
   "code": "3405",
   "name": "马鞍山市",
   "province": "34"
  },
  {
   "code": "3404",
   "name": "淮南市",
   "province": "34"
  },
  {
   "code": "3403",
   "name": "蚌埠市",
   "province": "34"
  },
  {
   "code": "3402",
   "name": "芜湖市",
   "province": "34"
  },
  {
   "code": "3401",
   "name": "合肥市",
   "province": "34"
  }
 ]
}
Copy after login

Related recommendations:

Province and city level two implemented by AngularJS Linkage function example

jquery's ajax to achieve the second-level linkage effect implementation method

Realize the registration page jq second-level linkage

The above is the detailed content of jquery implements secondary linkage drop-down selection based on layui. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!