00:00
好,那我们再讲一下另外一个特殊的表单啊,我们列表我们称之为下拉列表,叫做select,那select呢,也就说是它可以让我们用户来进行选择,Select是不是就选择的意思啊好,那你比如说我打开一个这是北京市的,呃,政府官网啊,那么我们走一走之后,你跟我来看一下,下面呢,这儿呢,你比如说一个省政府网站,点开完之后呢,我们发现哦,原来是不是全国各地的城市,这儿是不是都有啊,去什么辽宁的,黑龙江的是不是,然后上海的,江苏的都是政府网站,我选了之后是不是可以跳到相应的网站上去,而这个呢,可以供用户去选择使用的,我们称之为下拉列表。那这样做最大的好处是在于什么呢?哎,它是基于空间。能理解这个节约空间的概念吗?如果你不这么写,我一展开是不是很长呀?这个也很长,那你需要准备一个这么大的一个盒子,是不是才能在我的页面中显示出来,那可能会很近,很占空间,而你用它来做是不是展开,反正也只能选一个,选完B之后是不是就可以空间会大量的省心来了?哎,这个我们称为下拉列表,我相信同学们都见过啊,OK,好了,那么下拉列表的做法呢?它使用起来呢,是这么一种格式。
01:10
No,来这里面可以看到啊,E发格式首先是有一个叫做select,先有一个大盒子,然后里面呢会有若干的小项,小项呢是通过我们的option来进行结合记忆的,这个跟我们的cap很相似啊,这叫option叫做小选项,那你就比如说我们来做一个简单的到这结构里面去看一看,好CRL加NRL加S保存一个,这个呢是今天我们的第12个,我们叫做刚才我们讲的是什么呀?下拉叫做select select然我重说下拉列表好点,填码进来之后我们看看啊,那比如说我们这是请选择是吧?哎,我们的极卦。好,那籍贯我们知道是分省市啊,很多的它的写法,同学们给我来看一下,它是这么做的啊,它SE select select,然后第一个选省份,那省份的话呢,我们就选择领的。Option好了,那第一个比如说我是在北京,你直接写北京就可以了,北京那有了北京之后可加CL加VV有很多啊,除了这个之外的话呢,里面比如说还有天津哎,然后呢,上海哎,然后比如说看C,然后再来一个比如说我的山东好了,那这样的话,我把籍贯已经写完毕了,保存完之后呢,给我来预览效果啊,打开走一个一看,哦,果然是不是有了北京展开完之后有天津上好深东,你有多少是不是写多少就OK了,所以他还是比较好理解的,哎,这是这个oh no,选择选择可以吗?也可以啊,这是这一组好了,这是我们是选的省份的啊,那你可以呢。
02:39
还可以这么来做,CTRL加C跟我们来啊,CRL加CCTRL加V,这不叫北京,然后我写个杠杠,我随便写的啊,然后呢,写上请选择省份,然后呢,杠杠老师你为什么选两个杠杠呢?我觉得它很漂亮呀,我觉得好看而已啊,没有其他的想法,就觉得好看,你不带杠杠也没问题,好选完之后呢,我们CTRL加C1刷新来看,复制一下刷新啊,选完之后呢,请选择省份,点完之后呢,北京天津还是上海,是不是都可以来做成这个像样的效果呀,我们还是现在只关心它的外观,不关心里面的内容啊省份好了,老师那选还有是呢是我应该怎么选呢?哎,没问题,那你想要选择是的话,你只要把这个select再复制一份,听懂了吗?同志们一定要再复制一份啊,CT加V粘贴一份,那这个呢叫做select,哎,那这个呢是。
03:28
选择好了,这是城市选择的,那么上面这个呢,是不是省份选择的,省份选择的OK,这样呢,我们选择这个,那城市的话,是不是带来一组就行了,那请选择的那就不叫省份了,而是叫做什么呀?请选择城市OK城市比如说北京,北京有海淀区的官网对不对?哎,然后呢,昌平区的官网,哎,然后呢,还有我们的,呃。通州区的官网对不对啊,还有我们现在非常火的叫做雄安哦,我随便写了啊,哎,雄安区对不对?OK,写完它,那你我们选完之后呢,再刷新看效果,一刷新OK,请选择省份,我选了北京,然后呢,再选择城市,然后说海淀区什么什么区,这就叫做下拉列表,它的写法是不是还是比较简单的,OK,这是我们说的它的语法格式啊,记住就OK了啊,Select里面至少包含一对option,也就是说我们这select里面是不是至少有一个啊,你不能空着啊,好,第二个就是option,如果定义selected等于selected表示默认选中项。
04:30
能看明白吗?好,如果说你看我们这个的啊,打开完之后一刷新它默认选中项是不是第一个呀,第一个option,那我想默认把北京选上去,那怎么办呢?是可以的,大家可以结合着我们上面刚讲了一个单选按钮和复选按钮里面是不是有个叫做check等于check的这个选项呀,那它呢,因为叫做下拉列表的啊,它是双表线,所以说呢,它是这么写的,是里面是写了一个selected等于selected。Selected selected等于selected,这么写就表示默认选中状态了,好在这里面我来给你记下来啊,然后selected表示什么呀?哎,表示默认选中,哎,然后呢,北京就可以了,能看明白吗?如果你需要就写个selected就可以了,好,我们刷新看效果一走,你看北京是不是不要说被选中了,它不是选第一个了啊,我再刷新走能是北京显示第一个了,然后下面我因为我没有改,所以显示的还是第一个,那这一个呢,就是我们讲的这个select的它的一个使用方法啊,但是呢,我们实际中用的也比较少啊,然后呢,哎,但是我们实际开发哎会用比较少啊,用的比较少啊。
05:39
这个我们后面用的相对来说会比较少一些,因为现在呢,你看我是在北京政府网站上才能找到他的,一般一些其他的网站我们很难找到啊,他说老师不对呀,我在经翅见到一些他们这样的一些效果呢啊,我给你看看啊五八.com。然后呢,北京500.com然后我们这儿是不是有个叫做北京市切换呀,你比如说我来切换城市,点完之后呢,会出来一个,你看省份展开,诶老师这不是就是下拉列表吗?诶我可以告诉你,它并不是用select来做的,有机我给你检查一下你就知道了,点看完之后你发现它并不是用select,而是用什么呢?用div div UR和力来做的,发现了吗?这一看就是力来做,因为呢select呢,它有一个比较大的一个缺点,这个缺点呢,第一个就是在不同的浏览器里面展示的效果可能不太一样,而且我们很难去修改它的样式,比如说这个小三角老师能去掉吗?不能,而且你也不能给他修改很好看的样式,那所以说呢,一般正式的做法里面,你看我这三角还想来生这个效果呢,我们都是通过div,还有我们的UR和力模拟出来的,模拟下来列表的啊,这个呢,当我们学了JS就会告诉你怎么去做,你先知道就行,别说哦,这次select你就要求你理解一下啊,会用就行了,能明白吗?会简单看一看,因为我们实际中用的还是比较少的好。
06:54
好,那么我们讲完毕之后呢,我们再回到北京市政府网站上来,大家跟过来找一找,你看看你学会了几个表单呢,其中第一个这个是用什么表单来做的,哎,这一个一看我是不是可以输入内容啊,这一看我们知道是用文本框来做的,是不是叫文本框做的好了,那再往下走还有什么呢?你看这是不是也是文本框,那这个期房和现房这个一看就是一个单选按钮查询呢,是一个普通按钮,对吧。
07:22
然后这也是单选,也是复习单选按钮啊,这是它,然后呢,这也是单选按钮,也是普通按钮,好到这里你看这是个文本框,这是个什么呀?哎,这是个密码框,因为我们并没有看到,那下面这两个呢,就是我们的下拉列表了,那我们说了,懂行的看门道,不懂行的看热闹,那以后呢,你再看这页面,你就想哦,这是什么表单,这是什么表单,你应该这么想才对。好吧,好了,那这个呢,是我们给大家讲的我们这个下拉列表,它的具体使用方式。
我来说两句