这是模拟后台给数据的时候发现的一个坑。
结构:
<select id="subject" class="form-control"></select>
<select id="knowledge_point" class="form-control"></select>
<select id="category" class="form-control"></select>
for (let i=0;i<10;i++) {
let str=$("<option>str"+i+"</option>");
$("#category").append(str);
$("#knowledge_point").append(str);
$("#subject").append(str);
}
以上代码应该一眼就知道是给三个select节点分别添加十个子节点,可是最后代码只有id为subject的节点有子节点。
了解之后才知道,每一行的append其实都是执行了的,$("#category").append(str);
这一行是添加,下面两行是把添加的节点移动到了自己的节点下,导致最后执行$("#subject").append(str);
它是把十个节点移动到了自己身上,然后结束执行代码。
解决办法:
for (let i=0;i<10;i++) {
let str=$("<option>str"+i+"</option>");
$("#category").append(str);
$("#knowledge_point").append(str.clone(true));
$("#subject").append(str.clone(true));
}
让最后两个添加节点变为复制节点添加。