本文简单实现jQuery无限级联效果。 主要包含3个文件：index.html（主页），wuxianjilian.php（数据处理），wuxianjilian.sql（MySQL数据文件） 1. index.html 1 html 2 head 3 title 无限级联 / title 4 meta http-equiv ="Content-Type" content ="text/htm
本文简单实现jQuery无限级联效果。
主要包含3个文件：index.html（主页），wuxianjilian.php（数据处理），wuxianjilian.sql（MySQL数据文件）
1. index.html
<span> 1</span> <span><span>html</span><span>></span>
<span> 2</span> <span><span>head</span><span>></span>
<span> 3</span> <span><span>title</span><span>></span>无限级联<span></span><span>title</span><span>></span>
<span> 4</span> <span><span>meta </span><span>http-equiv</span><span>="Content-Type"</span><span> content</span><span>="text/html; charset=utf-8"</span> <span>/></span>
<span> 5</span> <span><span>meta </span><span>http-equiv</span><span>="Content-Language"</span><span> content</span><span>="zh-CN"</span> <span>/></span>
<span> 6</span> <span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"</span><span>></span><span>script</span><span>></span>
<span> 7</span> <span></span><span>head</span><span>></span>
<span> 8</span> <span><span>body</span><span>></span>
<span> 9</span> <span><span>div </span><span>id</span><span>="jilianContainer"</span><span>></span><span>div</span><span>></span>
<span>10</span> <span><span>script </span><span>type</span><span>="text/javascript"</span><span>></span>
<span>11</span> <span>$(document).ready(</span><span>function</span><span>(){
</span><span>12</span> <span>var</span><span> getData </span><span>=</span> <span>function</span><span>(obj){
</span><span>13</span> <span> $.ajax({
</span><span>14</span> <span> url:</span><span>'</span><span>wuxianjilian.php</span><span>'</span><span>,
</span><span>15</span> <span> type:</span><span>'</span><span>POST</span><span>'</span><span>,
</span><span>16</span> <span> data:{</span><span>"</span><span>pid</span><span>"</span><span>:obj.val()},
</span><span>17</span> <span> dataType:</span><span>'</span><span>json</span><span>'</span><span>,
</span><span>18</span> <span> async:</span><span>false</span><span>,
</span><span>19</span> <span> success:</span><span>function</span><span>(data){
</span><span>20</span> <span>if</span><span>($(</span><span>"</span><span>.selection</span><span>"</span><span>).length){
</span><span>21</span> <span> $(</span><span>"</span><span>.selection:gt(</span><span>"</span><span>+</span><span>$(obj).index()</span><span>+</span><span>"</span><span>)</span><span>"</span><span>).remove(); </span><span>//</span><span>移除后面所有子级下拉菜单</span>
<span>22</span> <span> $(</span><span>"</span><span>.selection:last</span><span>"</span><span>).after(data); </span><span>//</span><span>添加子级下拉菜单</span>
<span>23</span> <span> }</span><span>else</span><span> {
</span><span>24</span> <span> $(</span><span>"</span><span>#jilianContainer</span><span>"</span><span>).append(data); </span><span>//</span><span>初始加载情况</span>
<span>25</span> <span> }
</span><span>26</span> <span>//</span><span>所有下拉响应</span>
<span>27</span> <span> $(</span><span>"</span><span>.selection</span><span>"</span><span>).unbind().change(</span><span>function</span><span>(){
</span><span>28</span> <span> getData($(</span><span>this</span><span>));
</span><span>29</span> <span> });
</span><span>30</span> <span> },
</span><span>31</span> <span> error:</span><span>function</span><span>(msg){
</span><span>32</span> <span> alert(</span><span>'</span><span>error</span><span>'</span><span>);
</span><span>33</span> <span> }
</span><span>34</span> <span> });
</span><span>35</span> <span> }
</span><span>36</span>
<span>37</span> <span>//</span><span>Init</span>
<span>38</span> <span> getData($(</span><span>this</span><span>));
</span><span>39</span>
<span>40</span> <span>});
</span><span>41</span> <span></span><span>script</span><span>></span>
<span>42</span>
<span>43</span> <span><!--</span><span> 数据存储示例，仅提取数据，不做操作 </span><span>--></span>
<span>44</span>
<span>45</span> <span><span>div </span><span>style</span><span>="height:100px;display:block;"</span><span>></span><span>div</span><span>></span>
<span>46</span> <span><span>input </span><span>type</span><span>="button"</span><span> value</span><span>="存储数据"</span><span> id</span><span>="save"</span><span>></span><span>input</span><span>></span>
<span>47</span> <span><span>script </span><span>type</span><span>="text/javascript"</span><span>></span>
<span>48</span> <span>$(document).ready(</span><span>function</span><span>(){
</span><span>49</span> <span> $(</span><span>"</span><span>#save</span><span>"</span><span>).click(</span><span>function</span><span>(){
</span><span>50</span> <span>var</span><span> data </span><span>=</span><span> [];
</span><span>51</span> <span> $(</span><span>"</span><span>.selection</span><span>"</span><span>).each(</span><span>function</span><span>(){
</span><span>52</span> <span> data.push($.trim($(</span><span>this</span><span>).val()));
</span><span>53</span> <span> })
</span><span>54</span>
<span>55</span> <span> alert(data.join(</span><span>'</span><span>,</span><span>'</span><span>));
</span><span>56</span> <span> });
</span><span>57</span> <span>});
</span><span>58</span> <span></span><span>script</span><span>></span>
<span>59</span>
<span>60</span> <span></span><span>body</span><span>></span>
<span>61</span> <span></span><span>html</span><span>></span></span></span></span></span></span></span></span></span></span></span></span></span>
2. wuxianjilian.php
<span> 1</span> <span>php
</span><span> 2</span> <span>header</span>("Content-type: text/html; charset=utf-8"<span>);
</span><span> 3</span>
<span> 4</span> <span>//</span><span>数据库连接操作</span>
<span> 5</span> <span>$conn</span> = <span>mysql_connect</span>("localhost","Zjmainstay","") or <span>die</span>("Can not connect to database.Fatal error handle by ". <span>__FILE__</span><span>);
</span><span> 6</span> <span>mysql_select_db</span>("test",<span>$conn</span>); <span>//</span><span>数据库名为 test</span>
<span> 7</span> <span>mysql_query</span>("SET NAMES utf8",<span>$conn</span><span>);
</span><span> 8</span>
<span> 9</span> <span>//</span><span>获取父级id</span>
<span>10</span> <span>$pid</span> = (int)<span>$_POST</span>['pid'<span>];
</span><span>11</span>
<span>12</span> <span>//</span><span>查询子级</span>
<span>13</span> <span>$sql</span> = "SELECT id,text FROM `wuxianjilian` WHERE pid={<span>$pid</span>}"<span>;
</span><span>14</span> <span>$result</span> = <span>mysql_query</span>(<span>$sql</span>,<span>$conn</span><span>);
</span><span>15</span>
<span>16</span> <span>//</span><span>组装子级下拉菜单</span>
<span>17</span> <span>$html</span> = ''<span>;
</span><span>18</span> <span>while</span>(<span>$row</span> = <span>mysql_fetch_assoc</span>(<span>$result</span><span>)){
</span><span>19</span> <span>$html</span> .= '<option value="'.<span>$row</span>['id'].'">'.<span>$row</span>['text'].'</option>'<span>;
</span><span>20</span> <span> }
</span><span>21</span>
<span>22</span> <span>if</span>(!<span>empty</span>(<span>$html</span>)) <span>$html</span> = '<select class="selection"><option value="">请选择</option>' . <span>$html</span> . '</select>'<span>;
</span><span>23</span>
<span>24</span> <span>//</span><span>输出下拉菜单</span>
<span>25</span> <span>echo</span> json_encode(<span>$html</span><span>);
</span><span>26</span> <span>//</span><span>End_php</span>
3. wuxianjilian.sql
<span> 1</span> <span>wuxianjilian.sql </span><span> 2</span> <span>/*</span> <span> 3</span> <span>Navicat MySQL Data Transfer </span><span> 4</span> <span> 5</span> <span>Source Server : localhost </span><span> 6</span> <span>Source Server Version : 50516 </span><span> 7</span> <span>Source Host : localhost:3306 </span><span> 8</span> <span>Source Database : test </span><span> 9</span> <span>10</span> <span>Target Server Type : MYSQL </span><span>11</span> <span>Target Server Version : 50516 </span><span>12</span> <span>File Encoding : 65001 </span><span>13</span> <span>14</span> <span>Date: 2012-10-24 20:59:09 </span><span>15</span> <span>*/</span> <span>16</span> <span>17</span> <span>SET</span> FOREIGN_KEY_CHECKS<span>=</span><span>0</span><span>; </span><span>18</span> <span>--</span><span> ----------------------------</span> <span>19</span> <span>--</span><span> Table structure for `wuxianjilian`</span> <span>20</span> <span>--</span><span> ----------------------------</span> <span>21</span> <span>DROP</span> <span>TABLE</span> <span>IF</span> <span>EXISTS</span><span> `wuxianjilian`; </span><span>22</span> <span>CREATE</span> <span>TABLE</span><span> `wuxianjilian` ( </span><span>23</span> `id` <span>int</span>(<span>11</span>) <span>NOT</span> <span>NULL</span><span> AUTO_INCREMENT, </span><span>24</span> `pid` <span>int</span>(<span>11</span>) <span>DEFAULT</span> <span>NULL</span><span>, </span><span>25</span> `<span>text</span>` <span>varchar</span>(<span>32</span>) <span>DEFAULT</span> <span>NULL</span><span>, </span><span>26</span> <span>PRIMARY</span> <span>KEY</span><span> (`id`) </span><span>27</span> ) ENGINE<span>=</span>InnoDB AUTO_INCREMENT<span>=</span><span>22</span> <span>DEFAULT</span> CHARSET<span>=</span><span>utf8; </span><span>28</span> <span>29</span> <span>--</span><span> ----------------------------</span> <span>30</span> <span>--</span><span> Records of wuxianjilian</span> <span>31</span> <span>--</span><span> ----------------------------</span> <span>32</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>1</span><span>'</span>, <span>'</span><span>0</span><span>'</span>, <span>'</span><span>A0</span><span>'</span><span>); </span><span>33</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>2</span><span>'</span>, <span>'</span><span>0</span><span>'</span>, <span>'</span><span>B0</span><span>'</span><span>); </span><span>34</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>3</span><span>'</span>, <span>'</span><span>1</span><span>'</span>, <span>'</span><span>C1</span><span>'</span><span>); </span><span>35</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>4</span><span>'</span>, <span>'</span><span>1</span><span>'</span>, <span>'</span><span>D1</span><span>'</span><span>); </span><span>36</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>5</span><span>'</span>, <span>'</span><span>1</span><span>'</span>, <span>'</span><span>E1</span><span>'</span><span>); </span><span>37</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>6</span><span>'</span>, <span>'</span><span>2</span><span>'</span>, <span>'</span><span>F2</span><span>'</span><span>); </span><span>38</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>7</span><span>'</span>, <span>'</span><span>2</span><span>'</span>, <span>'</span><span>G2</span><span>'</span><span>); </span><span>39</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>8</span><span>'</span>, <span>'</span><span>3</span><span>'</span>, <span>'</span><span>H3</span><span>'</span><span>); </span><span>40</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>9</span><span>'</span>, <span>'</span><span>3</span><span>'</span>, <span>'</span><span>I3</span><span>'</span><span>); </span><span>41</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>10</span><span>'</span>, <span>'</span><span>3</span><span>'</span>, <span>'</span><span>J3</span><span>'</span><span>); </span><span>42</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>11</span><span>'</span>, <span>'</span><span>3</span><span>'</span>, <span>'</span><span>K3</span><span>'</span><span>); </span><span>43</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>12</span><span>'</span>, <span>'</span><span>4</span><span>'</span>, <span>'</span><span>L4</span><span>'</span><span>); </span><span>44</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>13</span><span>'</span>, <span>'</span><span>4</span><span>'</span>, <span>'</span><span>M4</span><span>'</span><span>); </span><span>45</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>14</span><span>'</span>, <span>'</span><span>8</span><span>'</span>, <span>'</span><span>N8</span><span>'</span><span>); </span><span>46</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>15</span><span>'</span>, <span>'</span><span>9</span><span>'</span>, <span>'</span><span>N9</span><span>'</span><span>); </span><span>47</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>16</span><span>'</span>, <span>'</span><span>14</span><span>'</span>, <span>'</span><span>O14</span><span>'</span><span>); </span><span>48</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>17</span><span>'</span>, <span>'</span><span>14</span><span>'</span>, <span>'</span><span>P14</span><span>'</span><span>); </span><span>49</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>18</span><span>'</span>, <span>'</span><span>14</span><span>'</span>, <span>'</span><span>Q14</span><span>'</span><span>); </span><span>50</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>19</span><span>'</span>, <span>'</span><span>17</span><span>'</span>, <span>'</span><span>R17</span><span>'</span><span>); </span><span>51</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>20</span><span>'</span>, <span>'</span><span>17</span><span>'</span>, <span>'</span><span>S18</span><span>'</span><span>); </span><span>52</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>21</span><span>'</span>, <span>'</span><span>20</span><span>'</span>, <span>'</span><span>T20</span><span>'</span>);
<span> 1</span> <span>/*</span> <span> 2</span> <span>Navicat MySQL Data Transfer </span><span> 3</span> <span> 4</span> <span>Source Server : localhost </span><span> 5</span> <span>Source Server Version : 50516 </span><span> 6</span> <span>Source Host : localhost:3306 </span><span> 7</span> <span>Source Database : test </span><span> 8</span> <span> 9</span> <span>Target Server Type : MYSQL </span><span>10</span> <span>Target Server Version : 50516 </span><span>11</span> <span>File Encoding : 65001 </span><span>12</span> <span>13</span> <span>Date: 2012-10-24 20:59:09 </span><span>14</span> <span>*/</span> <span>15</span> <span>16</span> <span>SET</span> FOREIGN_KEY_CHECKS<span>=</span><span>0</span><span>; </span><span>17</span> <span>--</span><span> ----------------------------</span> <span>18</span> <span>--</span><span> Table structure for `wuxianjilian`</span> <span>19</span> <span>--</span><span> ----------------------------</span> <span>20</span> <span>DROP</span> <span>TABLE</span> <span>IF</span> <span>EXISTS</span><span> `wuxianjilian`; </span><span>21</span> <span>CREATE</span> <span>TABLE</span><span> `wuxianjilian` ( </span><span>22</span> `id` <span>int</span>(<span>11</span>) <span>NOT</span> <span>NULL</span><span> AUTO_INCREMENT, </span><span>23</span> `pid` <span>int</span>(<span>11</span>) <span>DEFAULT</span> <span>NULL</span><span>, </span><span>24</span> `<span>text</span>` <span>varchar</span>(<span>32</span>) <span>DEFAULT</span> <span>NULL</span><span>, </span><span>25</span> <span>PRIMARY</span> <span>KEY</span><span> (`id`) </span><span>26</span> ) ENGINE<span>=</span>InnoDB AUTO_INCREMENT<span>=</span><span>22</span> <span>DEFAULT</span> CHARSET<span>=</span><span>utf8; </span><span>27</span> <span>28</span> <span>--</span><span> ----------------------------</span> <span>29</span> <span>--</span><span> Records of wuxianjilian</span> <span>30</span> <span>--</span><span> ----------------------------</span> <span>31</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>1</span><span>'</span>, <span>'</span><span>0</span><span>'</span>, <span>'</span><span>A0</span><span>'</span><span>); </span><span>32</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>2</span><span>'</span>, <span>'</span><span>0</span><span>'</span>, <span>'</span><span>B0</span><span>'</span><span>); </span><span>33</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>3</span><span>'</span>, <span>'</span><span>1</span><span>'</span>, <span>'</span><span>C1</span><span>'</span><span>); </span><span>34</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>4</span><span>'</span>, <span>'</span><span>1</span><span>'</span>, <span>'</span><span>D1</span><span>'</span><span>); </span><span>35</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>5</span><span>'</span>, <span>'</span><span>1</span><span>'</span>, <span>'</span><span>E1</span><span>'</span><span>); </span><span>36</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>6</span><span>'</span>, <span>'</span><span>2</span><span>'</span>, <span>'</span><span>F2</span><span>'</span><span>); </span><span>37</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>7</span><span>'</span>, <span>'</span><span>2</span><span>'</span>, <span>'</span><span>G2</span><span>'</span><span>); </span><span>38</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>8</span><span>'</span>, <span>'</span><span>3</span><span>'</span>, <span>'</span><span>H3</span><span>'</span><span>); </span><span>39</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>9</span><span>'</span>, <span>'</span><span>3</span><span>'</span>, <span>'</span><span>I3</span><span>'</span><span>); </span><span>40</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>10</span><span>'</span>, <span>'</span><span>3</span><span>'</span>, <span>'</span><span>J3</span><span>'</span><span>); </span><span>41</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>11</span><span>'</span>, <span>'</span><span>3</span><span>'</span>, <span>'</span><span>K3</span><span>'</span><span>); </span><span>42</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>12</span><span>'</span>, <span>'</span><span>4</span><span>'</span>, <span>'</span><span>L4</span><span>'</span><span>); </span><span>43</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>13</span><span>'</span>, <span>'</span><span>4</span><span>'</span>, <span>'</span><span>M4</span><span>'</span><span>); </span><span>44</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>14</span><span>'</span>, <span>'</span><span>8</span><span>'</span>, <span>'</span><span>N8</span><span>'</span><span>); </span><span>45</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>15</span><span>'</span>, <span>'</span><span>9</span><span>'</span>, <span>'</span><span>N9</span><span>'</span><span>); </span><span>46</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>16</span><span>'</span>, <span>'</span><span>14</span><span>'</span>, <span>'</span><span>O14</span><span>'</span><span>); </span><span>47</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>17</span><span>'</span>, <span>'</span><span>14</span><span>'</span>, <span>'</span><span>P14</span><span>'</span><span>); </span><span>48</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>18</span><span>'</span>, <span>'</span><span>14</span><span>'</span>, <span>'</span><span>Q14</span><span>'</span><span>); </span><span>49</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>19</span><span>'</span>, <span>'</span><span>17</span><span>'</span>, <span>'</span><span>R17</span><span>'</span><span>); </span><span>50</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>20</span><span>'</span>, <span>'</span><span>17</span><span>'</span>, <span>'</span><span>S18</span><span>'</span><span>); </span><span>51</span> <span>INSERT</span> <span>INTO</span> `wuxianjilian` <span>VALUES</span> (<span>'</span><span>21</span><span>'</span>, <span>'</span><span>20</span><span>'</span>, <span>'</span><span>T20</span><span>'</span>);
效果图：
图（1） 仅下拉框
图（2）层级提示+下拉框
图（3）存储数据点击响应
简单贴几张图，不过还是亲自测试效果好点，请点击演示地址测试。
演示地址：无限级联仅下拉选项框版本
下载地址：jQuery+PHP+MySQL简单无限级联实现源码
L'ordinateur portable n'a soudainement plus d'option WLAN
couleur de la police CSS
Carte secondaire de téléphone portable
Quelles sont les applications de l'Internet des objets ?
Comment désactiver l'invite de mise à niveau Win10
Que signifie le son de l'invite Douyin sw ?
curl_exec
Représentation binaire des nombres négatifs
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
