html的下拉框的几个基本用法

虽然使用EXT开发了一段时间，但是自己觉得我对javascript还是不是很熟，所以边看书边做小例子 给自己以后用到的时候查看下，都是很基本的东西，对初学者可能有点帮助

下面是代码

Java代码 

    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. //添加按钮的点击事件方法
    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. //删除按钮点击事件
    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>
    250. 来源免费刷Q币网：http://blog.sina.com.cn/hksqbi
时间： 2024-10-13 11:23:15

html的下拉框的几个基本用法的相关文章

读取mysql中的特定列值放入页面的下拉框中

1.使用的技术:JSP,Spring JDBC(Mapper) 2.代码 2.1 接口 public interface IMeetingRoomDao { public List<Mrcap> selectCap(); public List<Mrfloor> selectFloor(); } 2.2 实现类 @Override public List<Mrcap> selectCap() { List<Mrcap> caplist = new Array

自建List&lt;&gt;绑定ComboBox下拉框实现省市联动

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Data.SqlClient; namespace _04省市联动 { public partial cl

【峰回路转】Excel技巧百例 06.设置下拉框

如何才能在Excel中完成一个如下图所示的下拉框呢? 1.首先鼠标选中B2单元格 2.点击上方的"数据"中的"数据验证"下方的小三角,然后点击浮层中的第一项:数据验证 3.在弹出的窗口中,选择"序列",在来源中输入:请选择,优,良,中,差,点击[确认]. 这样一个下拉框,我们就做好了. 版权声明:本文为博主原创文章,未经博主允许不得转载.

struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($("#textValue").val() == "") {3                 $("#errortip").html("<font color='#FF0000'>请输入查询内容</font>")

选择下拉框是如何取选项的值？

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>select</title> <script type="text/javascript"> </script> </head> <body id="body&

vue.js实现单选框、复选框和下拉框

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label

jQuery之双下拉框

双下拉框要实现的效果,实际上就是左边下拉选择框里的内容,可以添加到右边,而右边同理.写了个简单的例子,来说明一下. 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <!DOCTYPEhtml> <html> <head> <title>jq

angularjs下拉框空白

搜索angularjs下拉框空白,可以出现很多解决方案,但是对于静态字段来说,网上目前还没有找到解决方案,如下: 1 <select class="form-control" ng-model="UserState" 2 ng-init="UserState=0"> 3 <option value="-1">选择状态</option> 4 <option value="0&q

select下拉框的样式在浏览器上的兼容问题

最近项目中遇到了自定义下拉框的默认样式在谷歌,火狐,IE上显示不同的问题. 左侧图片就是重写的样式,下拉框的右侧三角是选用的bootstrap里面的图片,通过绝对定位放过去的. css: select { /*Chrome同Firefox与IE里面的右侧三角显示的样式不同*/ border: solid 1px #ddd; /*将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; p