datalist选项列表
宁波网站建设一个令人期待已久的表单新功能是现在用户可以通过一个下拉菜单创建自己的条目。众所周知，select元素受限于指定的option值，Web开发者以往的做法是通过各种JavaScript技巧在文本字段中加入可扩充的选项列表。
现在HTML5规范很好地解决了这个问题。新的元素datalist和option元素本质上类似，都是实现容器的功能。但现在我们可以为datalist元素指派任意input元素，以显示所需要的选项。当然，不支持元素datalist的浏览器只能显示空白文本字段。
代码清单展示了这个新元素的使用。input元素被定义为text类型，list属性引用了element元素的id(这里是homepages)。网页完成加载时，autofocus属性将光标自动置于文本字段中，以便——至少是在Opera浏览器中——让选项列表出现。
datalist中的option元素只需要填好value属性就可以了，别的属性和文本节点也是有用的，但并非必需。当用户单击“提交”按钮时，浏览器将会为文本字段中的内容自动补上http://前缀，并跳转到生成的URL(使用window.location):
代码清单使用datalist元素填写URL地址
〈form〉
〈fabelfor=url〉Goto〈/label〉http://〈inputtype=textid=urlname=homepagelist=hoinpagesautoocus〉
〈datalistid=hompages〉
〈optionvalue=www.google.com〉
〈optionvalue=html5.komplett.cc/welcome〉
〈optionvalue=slashdot.org〉
〈optionvalue=wired.com〉
〈/datalist〉
〈inputtvpe=submit
onclicK="window.location=
'http://'+document.getElementByld('url').value;returnfalse;"〉
〈/form〉
若你想给旧式浏览器加入这样的选项列表，可以釆用以下给出的小技巧。支持datalist元素的浏览器会忽略附带的select元素，仅显示HTML5里新的select元素；而旧浏览器会在文本字段中显示带有预设链接的选项列表，当选区改变时，相应选项的文本也会被显示在文本字段中。
在代码清单中，我们需要给option元素加入文本节点，因为“旧的”select元素仅显示包含的文本，而不会显示value值的内容。
代码漘单在旧式浏览器中模拟datalist〈datalistid=hompages〉
〈selectname=homepage
onchange="document.getElementById('url').value=document.forms[0].homepage[l].value"〉
〈optionvalue=www.google.com〉www.google.com〈optionvalue=html5.komplett.cc/welcome〉html5.komplett.cc/welcome〈optionvalue=slashdotorg〉slashdot.org〈optionvalue=wired.com〉wired.com〈/select〉
〈/datalist〉
依靠select元素中的onChange事件，可以把选取的文本插人到文本字段中。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
