使用Html5的数据属性(data-*)Map级联关系，代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<title>Select级联</title> 5 ????<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 6 ????<script type=text/javascript> 7 ????????$(document).ready(function () { 8 ????????????//获取子select的option 9 ????????????let childOptions = $("select[name=‘children‘]").find("option");10 ????????????$("select[name=‘parent‘]").change(cascadeSelect);11 ????????????//级联过滤方法 12 ????????????function cascadeSelect(event) {13 ????????????????//获取选中index及value 14 ????????????????let index = event.target["selectedIndex"];15 ????????????????let item = event.target[index].value;16 ????????????????//过滤方法1 17 ????????????????let options = childOptions.filter(function () {18 ????????????????????return (this.value == "" || this.dataset.parent == item);19 ????????????????});20 ????????????????//过滤方法2 21 ????????????????// let options = Array.from(childOptions).filter(function (option) {22 ????????????????// ????return option.value == "" || option.dataset.parent == item23 ????????????????// });24 ????????????????//清空子select,重新绑定，并设定默认选中项 25 ????????????????$("select[name=‘children‘]").empty().append(options);26 ????????????????$("select[name=‘children‘]").find("option[value=‘‘]").prop("selected", true);27 ????????????}28 ????????});29 ????</script>30 </head>31 <body>32 ????<select name="parent">33 ????????<option value="" selected>请选择</option>34 ????????<option value="1">选项1</option>35 ????????<option value="2">选项2</option>36 ????????<option value="3">选项3</option>37 ????????<option value="4">选项4</option>38 ????????<option value="5">选项5</option>39 ????</select>40 ????<select name="children">41 ????????<!-- 使用data-*属性Map级联关系 -->42 ????????<option data-parent="" value="" selected>请选择</option>43 ????????<option data-parent="1" value="1">子选项1-1</option>44 ????????<option data-parent="1" value="2">子选项1-2</option>45 ????????<option data-parent="1" value="3">子选项1-3</option>46 ????????<option data-parent="1" value="4">子选项1-4</option>47 ????????<option data-parent="1" value="5">子选项1-5</option>48 ????????<option data-parent="2" value="6">子选项2-1</option>49 ????????<option data-parent="2" value="7">子选项2-2</option>50 ????????<option data-parent="2" value="8">子选项2-3</option>51 ????????<option data-parent="2" value="9">子选项2-4</option>52 ????????<option data-parent="3" value="10">子选项3-1</option>53 ????????<option data-parent="3" value="11">子选项3-2</option>54 ????????<option data-parent="3" value="12">子选项3-3</option>55 ????????<option data-parent="4" value="13">子选项4-1</option>56 ????????<option data-parent="4" value="14">子选项4-2</option>57 ????????<option data-parent="4" value="15">子选项4-3</option>58 ????????<option data-parent="4" value="16">子选项4-4</option>59 ????????<option data-parent="4" value="17">子选项4-5</option>60 ????????<option data-parent="5" value="18">子选项5-1</option>61 ????????<option data-parent="5" value="19">子选项5-2</option>62 ????????<option data-parent="5" value="20">子选项5-3</option>63 ????</select>64 </body>65 </html>jQuery实现select级联
原文地址：http://www.cnblogs.com/makesense/p/7506242.html