尽管使用EXT开发了一段时间，可是自己认为我对javascript还是不是非常熟，所以边看书边做小样例 给自己以后用到的时候查看下，都是非常主要的东西，对刚開始学习的人可能有点帮助




以下是代码

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  4. <title>grid</title>
  5. </head>
  6. <body>
  7. <input type="button" value="getSelect" onclick = "getSelect()"/>
  8. <input type="button" value="selectbtn" onclick = "getSelAge()"/>
  9. <div>
  10. <select name="selectAge" id="selectAge">
  11. <option value="1">18-21</option>
  12. <option value="2">22-25</option>
  13. <option value="3">26-29</option>
  14. <option value="4">30-35</option>
  15. <option value="5">Over35</option>
  16. </select>
  17. </div>
  18. <p>
  19. <input type="button" value="moreSelect" onclick = "moreSelect()"/>
  20. <div>
  21. <div>多选 须要添加 multiple属性<br>
  22. 在多选中size属性 能够初始化下拉框默认显示几个选项
  23. </div>
  24. <div>
  25. <select name="moreselAge" id="moreselAge" multiple="multiple">
  26. <option value="1">18-21</option>
  27. <option value="2">22-25</option>
  28. <option value="3">26-29</option>
  29. <option value="4">30-35</option>
  30. <option value="5">Over35</option>
  31. <option value="6">Over40</option>
  32. <option value="7">Over50</option>
  33. </select>
  34. </div>
  35. </div>
  36. <p></p>
  37. <input type="button" value="addNewbtn" onclick = "addNewSelections()"/>
  38. <input type="button" value="deletebtn" onclick = "deleteselections()"/>
  39. <input type="button" value="deleAllbtn" onclick = "deleteAllSelections()"/>
  40. <div>selectName :<input type="text" id="txtName"/></div>
  41. <div>selectValue:<input type="text" id="txtValue"/></div>
  42. <div>
  43. <select name="moreselAge" id="addNew">
  44. <option value="1" selected>18-21</option>
  45. <option value="2">22-25</option>
  46. <option value="3">26-29</option>
  47. <option value="4">30-35</option>
  48. <option value="5">Over35</option>
  49. <option value="6">Over40</option>
  50. <option value="7">Over50</option>
  51. </select>
  52. </div>
  53. <p>移动选项</p>
  54. <p>
  55. <table>
  56. <tr collspan="2">
  57. <td>
  58. <div>
  59. <select name="moreselAge" id="move1"  multiple="multiple" size="7">
  60. <option value="1">18-21sfiods</option>
  61. <option value="2">22-25sjdfd</option>
  62. <option value="3">26-29xxs</option>
  63. <option value="4">30-35vs</option>
  64. <option value="5">Over35dcff</option>
  65. <option value="6">Over40shhfsd</option>
  66. <option value="7">Over50sdefs</option>
  67. <option value="8">Over88www</option>
  68. </select>
  69. </div>
  70. </td>
  71. <td width="100" align="center">
  72. <input type="button" value=">" onclick = "rightSingle()" /><br>
  73. <input type="button" value=">>" onclick = "rightAll()"/><br>
  74. <input type="button" value="<" onclick = "leftSingle()"/><br>
  75. <input type="button" value="<<" onclick = "leftAll()"/>
  76. </td>
  77. <td>
  78. <div>
  79. <select name="moreselAge" id="move2"  multiple="multiple" size="7">
  80. <option value="1">18-21</option>
  81. <option value="2">22-25</option>
  82. <option value="3">26-29</option>
  83. <option value="4">30-35</option>
  84. <option value="5">Over35</option>
  85. <option value="6">Over40</option>
  86. <option value="7">Over50</option>
  87. <option value="8">Over88</option>
  88. </select>
  89. </div>
  90. </td>
  91. <tr>
  92. </table>
  93. </body>
  94. <script type="text/javascript">
  95. //获得下拉列表对象
  96. oListbox = document.getElementById("selectAge");
  97. var ListUtil = new Object();
  98. var selectbtn = document.getElementById("selectbtn");
  99. function getSelAge (){
  100. //訪问选项
  101. alert(oListbox.options[1].firstChild.nodeValue); //显示的内容
  102. alert(oListbox.options[1].getAttribute("value"));//相应的value
  103. alert("获得它在集合中的位置== " + oListbox.options[2].index); //获得它在集合中的位置
  104. alert("获得集合的元素个数长度== " + oListbox.options.length); //获得集合的元素个数长度
  105. }
  106. /*************************************************************************************************/
  107. //获得选中选项
  108. function getSelect(){
  109. var indx = oListbox.selectedIndex;
  110. alert("获得选中的选项的索引 "+ indx );
  111. }
  112. //多选下拉框
  113. var moreselAgeList = document.getElementById("moreselAge");
  114. /*******************************************************************/
  115. //入參 下拉框对象
  116. ListUtil.getSelectIndexes = function (oListbox){
  117. var arrIndexes =  new Array();
  118. for(var i=0 ; i<oListbox.options.length;i++){
  119. //假设该项被选中则把该项相应的索引加入到数组中
  120. if(oListbox.options[i].selected){
  121. arrIndexes.push(i);
  122. }
  123. }
  124. return  arrIndexes; //返回选中的选项索引
  125. }
  126. /***************************************************************/
  127. // 多选
  128. function moreSelect(){
  129. var arrIndexes = ListUtil.getSelectIndexes(moreselAgeList);
  130. alert("选中的数组length = "+ arrIndexes.length + " 选中的选项索引为 ："+ arrIndexes);
  131. }
  132. /************************加入新选项***************************************************************/
  133. //
  134. var addNewLisbox = document.getElementById("addNew"); //获得下拉框对象
  135. var otxtName = document.getElementById("txtName");   //name 文本框
  136. var otxtValue  = document.getElementById("txtValue"); //value 文本框
  137. //加入方法
  138. ListUtil.addOptions = function(oListbox,sName,sValue){
  139. var arryV = new Array();
  140. //标记输入的值能否够加入
  141. var isAdd = false;
  142. //推断是否有反复的值
  143. for(var i =0 ;i<oListbox.options.length;i++){
  144. var sv = oListbox.options[i].getAttribute("value");
  145. if(sv == sValue){
  146. alert("不能加入反复的value");
  147. return ;
  148. }else{
  149. isAdd = true;
  150. }
  151. }
  152. if(isAdd || oListbox.options.length == 0){
  153. //以下使用dom方法创建节点
  154. var oOption = document.createElement("option");// 创建option元素
  155. oOption.appendChild(document.createTextNode(sName));
  156. //由于选项的值不是必须的，所以假设传入了值 则加入进来
  157. if(arguments.length == 3){
  158. oOption.setAttribute("value",sValue);
  159. }
  160. oListbox.appendChild(oOption); //把选项加入进列表框
  161. alert("加入成功!!");
  162. }       // end if(isAdd)
  163. }
  164. //加入button的点击事件方法
  165. function addNewSelections(){
  166. var txtname = otxtName.value;
  167. var txtvalue = otxtValue.value;
  168. if(txtname != "" && txtvalue != ""){
  169. ListUtil.addOptions(addNewLisbox,txtname,txtvalue);//加入新项
  170. otxtName.value = "";
  171. otxtValue.value = "";
  172. }else{
  173. alert("请输入要加入的值和name");
  174. return;
  175. }
  176. }
  177. /*******************删除选中选项****************************************************************/
  178. //传入下拉框对象和(索引)
  179. ListUtil.deleteOptons = function(oListbox){
  180. var selIndex = oListbox.selectedIndex;
  181. if(oListbox.options.length == 0){
  182. alert("列表中无元素可删除");
  183. return ;
  184. }
  185. oListbox.remove(selIndex); //删除选中的选项
  186. }
  187. //删除button点击事件
  188. function deleteselections(){
  189. ListUtil.deleteOptons(addNewLisbox);
  190. }
  191. /**********删除全部***********************************************************************/
  192. ListUtil.deletsAllOptions = function(oListbox){
  193. if(oListbox.options.length != 0){
  194. for(var i= oListbox.options.length-1;i>=0;i--){  //倒着删除是由于
  195. oListbox.remove(i);
  196. }
  197. }else{
  198. alert("该列表为空!");
  199. }
  200. }
  201. function deleteAllSelections(){
  202. ListUtil.deletsAllOptions(addNewLisbox);
  203. }
  204. /*******移动选项***************************************************************************************/
  205. //获得下拉框
  206. var move1Listbox = document.getElementById("move1"); //左边下拉框
  207. var move2Listbox = document.getElementById("move2"); //右边下拉框
  208. //移动一个或多个选中的选项
  209. ListUtil.move = function(oListboxFrom ,oListboxTo){
  210. //var idx1 = oListboxFrom.selectedIndex;
  211. var arrIndexes = ListUtil.getSelectIndexes(oListboxFrom);
  212. var oOption ;
  213. if(arrIndexes.length == 0 ){
  214. alert("请选择至少一个选项!");
  215. return ;
  216. }else{
  217. for(var i=oListboxFrom.options.length-1;i>=0;i--){
  218. oOption = oListboxFrom.options[i];
  219. if(oOption.selected && oOption != null ){
  220. oListboxTo.appendChild(oOption);
  221. }
  222. }
  223. }
  224. }
  225. //向右移 一个元素
  226. function rightSingle(){
  227. ListUtil.move(move1Listbox,move2Listbox);
  228. };
  229. //向左移 一个元素
  230. function leftSingle(){
  231. ListUtil.move(move2Listbox,move1Listbox);
  232. }
  233. ListUtil.moveAll = function(oListboxFrom,oListboxTo){
  234. for(var i=oListboxFrom.options.length-1;i>=0;i--){
  235. oOption = oListboxFrom.options[i];
  236. //alert(oOption);
  237. oListboxTo.appendChild(oOption);
  238. }
  239. }
  240. //向右移全部选项
  241. function rightAll(){
  242. ListUtil.moveAll(move1Listbox,move2Listbox);
  243. }
  244. //向左移全部选项
  245. function leftAll(){
  246. ListUtil.moveAll(move2Listbox,move1Listbox);
  247. }
  248. </script>
  249. </html>

html的下拉框的几个基本使用方法的更多相关文章

  1. easyUI combobox下拉框很长，easyUI combobox下拉框如何显示滚动条的解决方法

    如下图,combobox下拉框里内容很多时,会导致下拉框很长,很不美观. 如何使得combobox下拉框显示滚动条 方法:把属性panelHeight:"auto"注释掉即可. $ ...

  2. JS将下拉框的disable变为able的方法

    在jquery中可以通过jqueryObj.attr("disabled","disabled")将页面中某个元素置为不可编辑或触发状态,但是在jquery的A ...

  3. bootstrap select下拉框模糊搜索和动态绑定数据解决方法

    此方法适合后台一次性返回所有数据好了废话不多说直接上代码: <!DOCTYPE html><html><head> <title>Bootstrap-s ...

  4. Android 第三方开源下拉框：NiceSpinner

    Android原生的下拉框Spinner基本上可以满足Android开发对于下拉选项的设计需求,但现在越来越流行的下拉框不满足于Android原生提供的下拉框Spinner所提供的设计样式,而改用自定 ...

  5. Yii2下拉框实现

    详细介绍yii2下拉框的实现方法,以商品分类的下拉框为例: 第一种方法:使用Html的activeDropDownList(),该方法的优点是:可以自定义下拉框的样式.具体实现如下: 1.控制器中,获 ...

  6. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  7. EXCEL（1）级联下拉框

    EXCEL级联下拉框 http://jingyan.baidu.com/article/3c343ff756e0cf0d377963f9.html 在输入一些多级项目时,如果输入前一级内容后,能够自动 ...

  8. python webdriver中对不同下拉框通过文本值的选择

    在自动化中python对下拉框的处理网上相对实例比较少,其它前辈写的教程中对下拉也仅仅是相对与教程来说的,比如下面: m=driver.find_element_by_id("Shippin ...

  9. Easyui多个下拉框联动效果

    好久没写前端了,以前在做多级联动的时候,用的是easyui的tree结构,但是需要一次性全部加载,不是按需加载,性能不好,退而求其之,用多个下拉框做 eayui的combobox  有onSelect ...

随机推荐

  1. 怎样预防Ddos攻击

    一.为何要DDOS? 随着Internet互联网络带宽的增加和多种DDOS黑客工具的不断发布,DDOS拒绝服务攻击的实施越来越容易,DDOS攻击事件正在成上升趋势.出于商业竞争.打击报复和网络敲诈等多 ...

  2. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  3. （转载）OC学习篇之---类的延展

    前一篇文章我们介绍了类的类目概念和使用,那么这篇文章我们继续来介绍一下OC中的一个特性:延展. 其实说白了,延展就是弥补C语言中的前向申明,我们知道,在C语言中,如果你想调用一个函数的话,那么在此之前 ...

  4. [转] 请别再拿“String s = new String("xyz");创建了多少个String实例”来面试了吧

    这帖是用来回复高级语言虚拟机圈子里的一个问题,一道Java笔试题的. 本来因为见得太多已经吐槽无力,但这次实在忍不住了就又爆发了一把.写得太长干脆单独开了一帖. 顺带广告:对JVM感兴趣的同学们同志们 ...

  5. hadoop的ganglia数据监控

    如果我们想知道当前运行的hadoop集群的状态,可以通过hadoop的客户端和web页面来获得,但是如果我们想知道当前集群的繁忙程度,如读写次数,这些工具就办不到了.幸运的是hadoop提供了一种ga ...

  6. Linker scripts之Intro

    1 Intro Every link is controlled by a linker script. The main purpose of the linker script is to des ...

  7. Mysql explain分析SQL语句之字段属性说明

    在 explain的帮助下,您就知道什么时候该给表添加索引,以使用索引来查找记录从而让select 运行更快.如果由于不恰当使用索引而引起一些问题的话,可以运行 analyze table来更新该表的 ...

  8. 远程连接mongodb出现 no route to host 和 Connection refused

    部署好mongodb服务器后,在客户端安装好php的mongodb扩展,用程序连接mongodb服务器出错:no route to host.搜索了差不多一天的时候都没有相关的解决方法.最后在mong ...

  9. [ZZ] C++ pair

    Pair类型概述 pair是一种模板类型,其中包含两个数据值,两个数据的类型可以不同,基本的定义如下: pair<int, string> a; 表示a中有两个类型,第一个元素是int型的 ...

  10. air for ios

    在 Adobe AIR 中为不同屏幕尺寸的多种设备提供支持 使用Flash Builder 4.5进行多平台游戏开发 手机屏幕触控技术与提升AIR在Android上的触控体验 AIR Native E ...