用 js 控制 select 的一些比较不错的功能。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
实现代码:
- <select id=test11 size=5 style="width:50px">
- </select>
- <select id="test" style="width:50px">
- </select>
- <button onclick='test[test.length]=new Option("1","12");'>
- 同时添加text和value
- </button>
- <button onclick='test.insertBefore(document.createElement("option")).innerText="2";'>
- 对text操作
- </button>
- <button onclick='test.appendChild(document.createElement("option")).setAttribute("value","3");'>
- 对value操作
- </button>
- <button onclick="alert(test.outerhtml)">
- view
- </button>
- <button onclick="test.removeChild(test.children[0])">
- del1
- </button>
- <button onclick="test.firstChild.removeNode()">
- del2
- </button>
- <button onclick="test[0]=null">
- del3
- </button>
效果演示:
来源: