15. 尚硅谷_佟刚_JavaScript DOM编程_实验之Select级联选择.wmv原创

练习二呢？跑起来是这样的，我用IE打开。允许主旨的内容，因为会跑GS嘛，是吧，我们看右键。原文件，诶，这个文件看起来会极其的简单，这个代码呢，我放在了这个ex1.gs里面，然后我通过script给它导进来了，就那个src导进来。然后啊，就是有一个select里面放的是什么呀，是不是一些省啊。还有一个select，这里边我们要说请选择，那现在的话呢，我选择一些省的话，我会在这个列表里边注入一些出来一些对应的城市，看一下河北，辽宁。

嗯，这辽宁啊，山东OK，我们就想看到这样的一个效果。好了，这就是我们整个练习的要求，我现在呢？复制过来。复制。暂时就放到这个下边了啊练习六。接进来。好吧，我们需要看我们如何来实现它，那我现在这个肯定实现不了哈，我这个代码是写在了另外一个文件里面，那文件我没拷过来，那把这个拿过来好，我们想想如何实现它，我现在呢，我是把这个X文件打开，这个文件呢就长成这样。

呃，China就是叫根节点，然后是一个子节点，Province就是省有一个名字，下面有一些city，这是一个省有一个名字，下边有一些city啊，这个一样好了，下面的话呢，我们看我们如何来实现这些功能。看看啊，首先要干什么呀，我首先我得保证啊，在我。第一个select就是省略select，在我嗯不断选择的时候，这块的话呢，会有出来什么，会出来不同的这个市跟它相匹配，那我我需要为省这个select加一个什么事件啊。大家看不应该是一个点击事件吧，选择你看这个没变，你看河北没变，河北没变，所以说有一个试件叫onto，就是说如果我这块要是发生改变的话，才来进行这个读取XMR文件里边的不同内容，所以说第一稿我们先写啊，分点on。

Road等于。放。我说的第一件事是为。谁呢？添加on。Change响应函数。好了，我们先看一下。点。At BYD。Province。

点等于。当我修改你的时候怎么样，这个onchang跟我们前面讲的on click的那个地位是一样，那个是点击，这个是修改，你写一个了，叫unchang。保存来。放心，大家看啊。这个时候怎么了？哦，这个不行，这个还是哪的呀，这个是不是还是那个EX2啊，得看它。打开浏览器。这是onto，你看我还选辽宁的话，它是不是不触发呀，我修改一个来触发了，这是我们说的第一个叫onto选项函数好了，记完之后的话呢，然后呢。

对呀，那如果要是的确是改的话，我得去。二加载加载。这个叫t.XL文件，那关于如何加载的话，这个我们直接给一个函数，我们去加载就可以了，直接把这个打开。用鸡腿开吧。有乱码，用技术看没问题。好了，这个我们直接拷过来，CTRLC。

啊，是什么呀？那JS解析SM文档的，我这个是怎么了？我这个的话，目前这个函数只支持IE，对于Chrome，对于fairf fo不支持，那回头我们可以把这个函数再给它补充一下啊，这个不是我们规定的重点加载，我们直接下载就可以了，好了，加载这个文件的话，我们会得到一个什么呢？得到代表。该文档的。对象就是说我也会到这么一个这个，我们当前那个是。一样的好了，那这个以后呢，下一个应该是什么，大家说。下一个应该是你看我呢，我选择不同的省，他会给我出来不同的市，那我怎么知道，我怎么知道需要选这个是啊，我怎么知道。

到这个里边来，你看我能带出的是什么呀，我能带去是不是只有这个省啊，那比方说河北，辽宁，山东，注意看这。河北辽宁山东，我只能去干什么呀，我只能是上这个里边来找。跟我匹配的那个节点吧，OK。好了。然后呢，在这个文档中，在。XL文档中查找和。选择的省匹配的。All。

节点。好了，如果这个要是找到的话怎么办？如果找到的话，我们是不是就得到了这这么一个方位节点呢？这个得到以后的话呢，然后怎么，然后再得到我们这个pro节点所有的样city节点，好吧，再得到。Pro节点的所有的节点。五便利七你点点做什么得到？每一个CK子节点的文本值，再然后呢，六六，大家看总结文本之后需要放什么里边，是不是放这个里边。

放这个里边把文本值，然后呢，利用得到的文本值。逛街什么节点？什么节点往里面放呢？叫options节点，Option节点control c，我复制一份哈，Option。Ocean。今天长啥样呢？就长成这样，只不过这块的话，我们可以不写这个什么，可以不写value，我直接就是城市就可以了，城市名称。今天好，并把并把它。并把。六创建的子节点。添加为谁呢？添加为这个C的节点。

节点标准节点啊。啊子节点这就行了，这就是我们整个操作的过程。大家再想一想，这里边还有没有什么问题哈，首先呢，加载得到对应的province节点，得到对应的city，然后的话呢，遍历每个文本值，得到option，然后我再加有个什么问题啊，比方说我选了一个河北出来了是吧，我再选一个辽宁。那要是按我们这么写的话，我辽宁的，辽宁的这些城市是不是应该河北之后加呀，懂懂我这个意思吗？所以说我们应该是在每选择一个省的时候，把上一个选择给它清空吧。尿葡萄它是不是尿葡是不是就是一个累加呀，再说一遍啊，我在我没选择一个省的时候，我们应该保证，比方说在是山东啊，到潍坊好了，我再选一个辽宁，我们看这辽宁是不是重庆开始啊，如果要是不清的话，是不是会导致的，我这个沈阳是在那个潍坊的后边，诶有这样一个问题，所以说这里边的话呢，我们实际上还有一步。

确实发生改变的话，我写一个。1.18。哎，我们需要把。把谁呢，把这个节点。嗯。我这样的是我们这篇文档的ID，是的，这个点点。除谁呢？除第一个子节点外。都辛苦。

都移除吧。OK，这是整个的过程，为什么第一个需要留着呀，第一个是不是请选择呀？这个需要留着好了，这就是整个的流程，我们看一看，哪一块需要我们具体看一下呢？我们看哈，移除这个大家自己来写好了，加载这个我来写一下，加载来加载哈，我得到的是一个。或XL等于log。First。XML。好了，我是c.X好了，你得到这个以后的话呢，我看看我能不能得到这个里边的profit节点，我来写一下啊。War provides。

等于XL点没有没有提示啊，Get elements I。这什么呢，All？好，Alert一下，At是pro.this好好。就是说你干什么呀，当我每一个改的时候的话呢，我去加载这个XL文档所对应的那个document，然后呢，我来得到其中有多少个province节点。看一看。刷新是不是三个呀。是三个吧，在哪呢？你看123我再写，大家看一下CRC。

你稍微这个是四个。放心。是不是四个呀，但我这个四就没什么意义了啊，把这个四移除好了，利用这样的方式的话呢，我们可以加载到那个时间点，那下一步下步我如何找到跟我匹配的那个节点呢。那首先我需要得到什么呀，得到当前的。Pro。Y等于K减YK是谁呀？对，是。这是value，好看看刷新。

是辽宁啊。是山东啊，是河北啊，哎，这是怎么个情况。没事哈，就是这个，呃，一个LIS里边自带的这个浏览器有是小bug OK，这个只有能够得到的话呢，然后整个这个我还可以得到，我怎么样，我是不是可以用我当前这个值上里边去选呢，去选什么，去选跟我匹配的这个province。怎么选一种方式，我可以立法。我可以遍历，我可以遍历的话呢，然后一个一个找，只要我们这个名字跟我配上就可以了，这种方式比较麻烦，还有更简洁的方式，我们可以用一个技术叫。X pass，我们看一下。X pass X pass是一门在XL文档中查找信息的语言，X pass用于在XL文档中通过元素和属性进行导航，换句话说就是我用这个X pass技术，我可以迅速的找到我需要的那个节点。内容呢有好多，我们直接去看例子，就是看他给我们的例子，看用他他那个例子，然后完了我们去修改一下，我们就可以用往下翻，我们肯定不能一个一个看太多了往翻。

你看X帕语法。看表达式，表达式的话呢，这块有几个啊，我们希望怎么找呢？我们希望的是找这个是根据这个什么，根据这个属性找这个节点吧，再说一遍啊，根据这个属性找这个节点，于是来看根据属性找节点，我们看有没有。

没有没有带直的就说都不是再看。诶这块有一个，你看只有看见等号的话才有可能，你看这是什么选择。开头元素。而且这些元素拥有ing的。浪属性差不多啊，学法的话呢，差不多就是这样，你看就是选择一个元素，然后的话呢，里边有一个什么呀，里边有一个属性叫long，等于它把这个复制一下。CTRLC好了，语法有了怎么用啊？语法就有了是吧，那我们下一个就要看我如何来用它呀。嗯，后边还有后边有后边有后边还有一些是吧，后边有这些的话呢，我就我们就不关心了，哎，我们看的话呢，就是它，于是我。复制一下，下面我们需要看如何来用这个X pass。

这个X pass吧，我们在这个当佛接里边，我们可以直接来写，我们现在就用一个纯的呃，Down操作如何来用呢。看如何来写哈。快了，这里边啊，没给基本的事例。看这。创建，然后呢，Load。Set路径表达式什么set select no，通过这样的方式呢？我们可以干什么呀？我们可以去找什么？Set select no？第一个看都是set set select no，好吧，于是来写吧。

啊，Select看重了哈，Select nose。于是过来看select no写法是这样的，对啊，X me talk.select。Nose。然后是放一个括号。把这个放进来是什么呢？我要找这里边什么节点啊，具体要是说的话应该是节点。节点，其中有个什么属性呢？Name属性等于。要说的话。加，加谁啊，加我的always是这么写吧，如果要写的话，应该这么写。

好，这个得到的将是一个括号。In the element这个呢是那个XL文档里边的，我们看是不是可以获取到alert。大家看个是一个OK，看结果刷新。三河北一九吧。看这个。没有，是不零啊，是不是找着了呀，看见吗？哎，我通过这样方式的话呢，我就可以找到我所对应的那个节点，那这个节点应该是什么里边的这个节点是不是这个里边的是吧？然后的话呢，对找到之后的话，我就可以便利其中的这个C了吧，那我再送大家一程，怎么得呢？这个助教这个助教这个等的注释哈，好了，我要得到所有的CT子节点或CA。

等于province。点什么呢？然后我把这个一个一个出来。或I等于零，I小于k nose点。I加加乐nose点没有点I点什么first child.no保存再看。

河北这是什么的问题啊，你不用管辽宁。山东，哎，没有问题，这就是我们整个关于难点的地方，我们都讲到了。好，我们重新归结一下，看一下，首先的话呢，加一个on change函数，这个我已经写完了，然后啊，这一步的话呢，我们到最后的时候再写也行，就是说我操作完一个之后，我怎么了，我必须得把前一个清除，否则前一个就得在后一个后边先拉上，比方说我这这这到承德是吧，你这个你写一个辽宁在沈阳挨着承德后边很明显有问题。这个如何清除，大家可以自己想一下，加载呢，这个函数我写了，我们说了，这样加载之后呢，我将得到代表那个X方文档的一个，嗯，到和面对象，这个对象的话呢，可以跟。

我在当前里边用那个node去查找节点是一样的。然后呢？我可以在这个文档里边去找所有的这个province，现在看的话，他这个province是不是就不用找了呀。是不是不用找了，我怎么了，我是不是直接用X pass就可以呀？啊直接使用X pass。技术查找。XL文档中匹配的节点，这样就可以了，找的方式呢？我们用的是什么呢？用的是select no，它返回的应该是一个节点的集合，后边是这个X pass的基本语法。

怎么用的，我直接把这个文档拿过来找例子，再找啊它的示例就可以了，那我在没有这个X pass之前，我们不知道语法是什么样的，也不知道用的是。哪一个方法你直接看这个里面它会有它会有提示教程嘛，是吧，拿过来OK，这样的话呢，我找到了我这个节点，找到找到了我这个节，找到了我这个合适的这个节点之后的话呢，然后我来便利它的city，进而找到一个一个的文本，然后再创建再加到的子节点就可以了。好吧，大家试一下写，大家在写这个练习的过程中呢，出现了很多问题哈，你比方说我们。移出节点的时候，发现从前往后移不行，需要从后往前移才可以，一会儿的话我们会讲，为什么我们首先的话呢，把这个练习写完，呃，第一个下面这个文档已经OK了。

第二个我得到什么呀，得到对应的节点，这也写完了。好。不要了。那得到这pro节点的话，这句话是什么意思呢？这句话是说上。我这个X文档里边去找一个pro节点，其中内属性等于pro value是这意思吧？再说一遍啊，这句话的意思是上这个X文档里边去找一个proce节点，其中name属性等于它，然后呢，这也不要了。然后再看，诶，我找到这一组节点的话呢，我需要选择的第一个节点，然后来获取所有的找到，然后什么呢？然后便利的话呢，我们实际上也便利了一半了。

那怎么办呢？我需要。得到一个一个的文本节点，而且需要去创建一个控制节点，好了。或p no等于document点。Great back no。这值应该是谁呀？应该是或CKY6吧，等于nose。I the first child no value是这样吧，把这个放里边来，今天text好了，做完这个之后的话呢，我还得创建一个一个的。

Option option等于document.create什么？然后呢，这个点的。A panda child t road，然后再把什么，再把这个加为整个city的节点，这个应该是谁呀？这个CT是不是当前文档这个CT，他这个CT的话呢，应该是没获取过，好那我就直接加这样写。点get element byd.they option no OK看效果。

就这个吗？那我说没清啊，没青就是这么一个效果，那其中需要注意的是呢，如果我选择的要是他的话。后边就不应该再选了啊，你看容易直想这样的话就肯定肯定不行是吧，刚才这句话什么意思，如果我选择的这个值是请选择的话，直接清空，这个时候不应该去加载吧。就是说如果选择这个值是请选择的话，就不要下载，直接清空就可以了，所以说我们先来看一下关于清空的问题，那清空的话呢，我们应该是清空CK节点的除了第一个以外的所有子节点，于是写个括号CK。

No等于点get element by d d。好了。Control c。来把这个放到这儿。这直接给到吧，啊，那我清空除第一个以外的所有子节点，我们正常的想法都是这么写。先获取什么呀？先获取not option option等于not.get element by name好了，做一个for循环。I等于零，I小于CK。

No the option。NI加加，正常想的都是这么写，从一开始呗，第一个不清呗。然后DK not点幕叫听谁呢？听DK ocean。哎，正常我们都会不想这么行吧，好吧，大家看这么清行不行，河北没问题啊，你看这个辽宁，大家看河北清了是吧，是不是没清干净啊，哎。为什么会没清干净？这就是我们刚才同学遇到的问题，我们说一下他为什么会没清干净呢？我们来看一个图。

在这。大家看哎，就这么清的哈，比方说我们现在啊，我们清的是这个辽宁，这个正常情况下的话呢，辽宁应该是有呃，请选择沈阳大连，鞍山，抚顺铁岭，然后的话，大家看看I等于一的时候，清的是谁呀？零一清的一是是谁，是不是沈阳啊。是吧，然后注意I等于一以后的话，这个数组是不是变了呀，清完之后的话，这个数组是不是变成了请大连鞍山抚顺铁岭了呀，I等于二的时候清谁了？012请鞍山吧，是不是把这个大连剩下了，看见了吧？I等于三的时候，0123称的是谁？铁丙A等于四约界了。

所以说会剩下一个大跟福。好，我们看看这里边儿，我也来重新刷一下，现在选一个辽宁。看好，我们来选择一个山中，大家看是不是这一个大和府啊，原因在于我们在我们在清除的时候，那个节点所对应那个数组是。动态变化看见了吧，哎，我第一次听的时候刚刚好，如果每一次都是它的话就无所谓了，我下一次再听的时候，这输出已经变了，这个时候这个20几的删删了，而不再是大连，所以说这个大连不就剩下了，怎么解决啊？

我无论什么时候我都清第二个元素是不是就可以啊，不管什么时候我都清它就没问题了，因为这个数组是变化的，考虑到这个数组是变化的这么轻，首先呢，我把这个Les啊拿出来，因为这个数组是变化的，这个length的值每次也不一样，然后我清的时候的话呢，这个就拿出来了啊。拿出来，我每次只听第二个。这个时候你动手变你就不要紧了，再看。河北。辽宁是不是好了，山东哎，这个没问题了，或者是从后往前倾也没问题，好了，这个程序的话呢，还差一点，差什么呢，差个它。如果这个Y溜直。

如果这个Y值。是空的话，我是不需要进行下载。Value等于空。等于空气热什么呀？等于空，意味着我是不是只需要给它清空就可以呀？而别的工作我不需要写。清空就可以了，别的工作我不需要再进行下载，我直接就在。方法结束就可以了。OK，就是整个的过程再看。刷新。没没问题，好回来，哎，我只清空就可以，这个时候的话呢，我不用去加载那个文档，我们可以怎么办？可以这会打开乐你看一下就知道了。

看刷新打印的好了，我回来他不打印，这个时候直接清空，我不用来下载这个文档好了，那整个这个操作的话呢，实际上类似于一个Ajax操作，只不过我们这个数据啊，不是从服务器来获取的，是从本地的一个XL文档获取的，但整个这个操作跟aja的操作是一样的。比方说哎，我要选择不同的班，选择那个班以后的话呢，出来不同的学生，这个数据是动态变化的，这个时候我需要用那个班去找到学生的信息，或者说我们前面讲的，我要选择不同的部门，然后选择不同的员工，这是一个典型的A操作，那要是用这个普通GS写的话，基本上就是这样写。14。