html的下拉框的几个基本使用方法
尽管使用EXT开发了一段时间,可是自己认为我对javascript还是不是非常熟,所以边看书边做小样例 给自己以后用到的时候查看下,都是非常主要的东西,对刚開始学习的人可能有点帮助
以下是代码
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gbk">
- <title>grid</title>
- </head>
- <body>
- <input type="button" value="getSelect" onclick = "getSelect()"/>
- <input type="button" value="selectbtn" onclick = "getSelAge()"/>
- <div>
- <select name="selectAge" id="selectAge">
- <option value="1">18-21</option>
- <option value="2">22-25</option>
- <option value="3">26-29</option>
- <option value="4">30-35</option>
- <option value="5">Over35</option>
- </select>
- </div>
- <p>
- <input type="button" value="moreSelect" onclick = "moreSelect()"/>
- <div>
- <div>多选 须要添加 multiple属性<br>
- 在多选中size属性 能够初始化下拉框默认显示几个选项
- </div>
- <div>
- <select name="moreselAge" id="moreselAge" multiple="multiple">
- <option value="1">18-21</option>
- <option value="2">22-25</option>
- <option value="3">26-29</option>
- <option value="4">30-35</option>
- <option value="5">Over35</option>
- <option value="6">Over40</option>
- <option value="7">Over50</option>
- </select>
- </div>
- </div>
- <p></p>
- <input type="button" value="addNewbtn" onclick = "addNewSelections()"/>
- <input type="button" value="deletebtn" onclick = "deleteselections()"/>
- <input type="button" value="deleAllbtn" onclick = "deleteAllSelections()"/>
- <div>selectName :<input type="text" id="txtName"/></div>
- <div>selectValue:<input type="text" id="txtValue"/></div>
- <div>
- <select name="moreselAge" id="addNew">
- <option value="1" selected>18-21</option>
- <option value="2">22-25</option>
- <option value="3">26-29</option>
- <option value="4">30-35</option>
- <option value="5">Over35</option>
- <option value="6">Over40</option>
- <option value="7">Over50</option>
- </select>
- </div>
- <p>移动选项</p>
- <p>
- <table>
- <tr collspan="2">
- <td>
- <div>
- <select name="moreselAge" id="move1" multiple="multiple" size="7">
- <option value="1">18-21sfiods</option>
- <option value="2">22-25sjdfd</option>
- <option value="3">26-29xxs</option>
- <option value="4">30-35vs</option>
- <option value="5">Over35dcff</option>
- <option value="6">Over40shhfsd</option>
- <option value="7">Over50sdefs</option>
- <option value="8">Over88www</option>
- </select>
- </div>
- </td>
- <td width="100" align="center">
- <input type="button" value=">" onclick = "rightSingle()" /><br>
- <input type="button" value=">>" onclick = "rightAll()"/><br>
- <input type="button" value="<" onclick = "leftSingle()"/><br>
- <input type="button" value="<<" onclick = "leftAll()"/>
- </td>
- <td>
- <div>
- <select name="moreselAge" id="move2" multiple="multiple" size="7">
- <option value="1">18-21</option>
- <option value="2">22-25</option>
- <option value="3">26-29</option>
- <option value="4">30-35</option>
- <option value="5">Over35</option>
- <option value="6">Over40</option>
- <option value="7">Over50</option>
- <option value="8">Over88</option>
- </select>
- </div>
- </td>
- <tr>
- </table>
- </body>
- <script type="text/javascript">
- //获得下拉列表对象
- oListbox = document.getElementById("selectAge");
- var ListUtil = new Object();
- var selectbtn = document.getElementById("selectbtn");
- function getSelAge (){
- //訪问选项
- alert(oListbox.options[1].firstChild.nodeValue); //显示的内容
- alert(oListbox.options[1].getAttribute("value"));//相应的value
- alert("获得它在集合中的位置== " + oListbox.options[2].index); //获得它在集合中的位置
- alert("获得集合的元素个数长度== " + oListbox.options.length); //获得集合的元素个数长度
- }
- /*************************************************************************************************/
- //获得选中选项
- function getSelect(){
- var indx = oListbox.selectedIndex;
- alert("获得选中的选项的索引 "+ indx );
- }
- //多选下拉框
- var moreselAgeList = document.getElementById("moreselAge");
- /*******************************************************************/
- //入參 下拉框对象
- ListUtil.getSelectIndexes = function (oListbox){
- var arrIndexes = new Array();
- for(var i=0 ; i<oListbox.options.length;i++){
- //假设该项被选中则把该项相应的索引加入到数组中
- if(oListbox.options[i].selected){
- arrIndexes.push(i);
- }
- }
- return arrIndexes; //返回选中的选项索引
- }
- /***************************************************************/
- // 多选
- function moreSelect(){
- var arrIndexes = ListUtil.getSelectIndexes(moreselAgeList);
- alert("选中的数组length = "+ arrIndexes.length + " 选中的选项索引为 :"+ arrIndexes);
- }
- /************************加入新选项***************************************************************/
- //
- var addNewLisbox = document.getElementById("addNew"); //获得下拉框对象
- var otxtName = document.getElementById("txtName"); //name 文本框
- var otxtValue = document.getElementById("txtValue"); //value 文本框
- //加入方法
- ListUtil.addOptions = function(oListbox,sName,sValue){
- var arryV = new Array();
- //标记输入的值能否够加入
- var isAdd = false;
- //推断是否有反复的值
- for(var i =0 ;i<oListbox.options.length;i++){
- var sv = oListbox.options[i].getAttribute("value");
- if(sv == sValue){
- alert("不能加入反复的value");
- return ;
- }else{
- isAdd = true;
- }
- }
- if(isAdd || oListbox.options.length == 0){
- //以下使用dom方法创建节点
- var oOption = document.createElement("option");// 创建option元素
- oOption.appendChild(document.createTextNode(sName));
- //由于选项的值不是必须的,所以假设传入了值 则加入进来
- if(arguments.length == 3){
- oOption.setAttribute("value",sValue);
- }
- oListbox.appendChild(oOption); //把选项加入进列表框
- alert("加入成功!!");
- } // end if(isAdd)
- }
- //加入button的点击事件方法
- function addNewSelections(){
- var txtname = otxtName.value;
- var txtvalue = otxtValue.value;
- if(txtname != "" && txtvalue != ""){
- ListUtil.addOptions(addNewLisbox,txtname,txtvalue);//加入新项
- otxtName.value = "";
- otxtValue.value = "";
- }else{
- alert("请输入要加入的值和name");
- return;
- }
- }
- /*******************删除选中选项****************************************************************/
- //传入下拉框对象和(索引)
- ListUtil.deleteOptons = function(oListbox){
- var selIndex = oListbox.selectedIndex;
- if(oListbox.options.length == 0){
- alert("列表中无元素可删除");
- return ;
- }
- oListbox.remove(selIndex); //删除选中的选项
- }
- //删除button点击事件
- function deleteselections(){
- ListUtil.deleteOptons(addNewLisbox);
- }
- /**********删除全部***********************************************************************/
- ListUtil.deletsAllOptions = function(oListbox){
- if(oListbox.options.length != 0){
- for(var i= oListbox.options.length-1;i>=0;i--){ //倒着删除是由于
- oListbox.remove(i);
- }
- }else{
- alert("该列表为空!");
- }
- }
- function deleteAllSelections(){
- ListUtil.deletsAllOptions(addNewLisbox);
- }
- /*******移动选项***************************************************************************************/
- //获得下拉框
- var move1Listbox = document.getElementById("move1"); //左边下拉框
- var move2Listbox = document.getElementById("move2"); //右边下拉框
- //移动一个或多个选中的选项
- ListUtil.move = function(oListboxFrom ,oListboxTo){
- //var idx1 = oListboxFrom.selectedIndex;
- var arrIndexes = ListUtil.getSelectIndexes(oListboxFrom);
- var oOption ;
- if(arrIndexes.length == 0 ){
- alert("请选择至少一个选项!");
- return ;
- }else{
- for(var i=oListboxFrom.options.length-1;i>=0;i--){
- oOption = oListboxFrom.options[i];
- if(oOption.selected && oOption != null ){
- oListboxTo.appendChild(oOption);
- }
- }
- }
- }
- //向右移 一个元素
- function rightSingle(){
- ListUtil.move(move1Listbox,move2Listbox);
- };
- //向左移 一个元素
- function leftSingle(){
- ListUtil.move(move2Listbox,move1Listbox);
- }
- ListUtil.moveAll = function(oListboxFrom,oListboxTo){
- for(var i=oListboxFrom.options.length-1;i>=0;i--){
- oOption = oListboxFrom.options[i];
- //alert(oOption);
- oListboxTo.appendChild(oOption);
- }
- }
- //向右移全部选项
- function rightAll(){
- ListUtil.moveAll(move1Listbox,move2Listbox);
- }
- //向左移全部选项
- function leftAll(){
- ListUtil.moveAll(move2Listbox,move1Listbox);
- }
- </script>
- </html>
html的下拉框的几个基本使用方法的更多相关文章
- easyUI combobox下拉框很长,easyUI combobox下拉框如何显示滚动条的解决方法
如下图,combobox下拉框里内容很多时,会导致下拉框很长,很不美观. 如何使得combobox下拉框显示滚动条 方法:把属性panelHeight:"auto"注释掉即可. $ ...
- JS将下拉框的disable变为able的方法
在jquery中可以通过jqueryObj.attr("disabled","disabled")将页面中某个元素置为不可编辑或触发状态,但是在jquery的A ...
- bootstrap select下拉框模糊搜索和动态绑定数据解决方法
此方法适合后台一次性返回所有数据好了废话不多说直接上代码: <!DOCTYPE html><html><head> <title>Bootstrap-s ...
- Android 第三方开源下拉框:NiceSpinner
Android原生的下拉框Spinner基本上可以满足Android开发对于下拉选项的设计需求,但现在越来越流行的下拉框不满足于Android原生提供的下拉框Spinner所提供的设计样式,而改用自定 ...
- Yii2下拉框实现
详细介绍yii2下拉框的实现方法,以商品分类的下拉框为例: 第一种方法:使用Html的activeDropDownList(),该方法的优点是:可以自定义下拉框的样式.具体实现如下: 1.控制器中,获 ...
- JavaScript向select下拉框中添加和删除元素
JavaScript向select下拉框中添加和删除元素 1.说明 a 利用append()方法向下拉框中添加元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...
- EXCEL(1)级联下拉框
EXCEL级联下拉框 http://jingyan.baidu.com/article/3c343ff756e0cf0d377963f9.html 在输入一些多级项目时,如果输入前一级内容后,能够自动 ...
- python webdriver中对不同下拉框通过文本值的选择
在自动化中python对下拉框的处理网上相对实例比较少,其它前辈写的教程中对下拉也仅仅是相对与教程来说的,比如下面: m=driver.find_element_by_id("Shippin ...
- Easyui多个下拉框联动效果
好久没写前端了,以前在做多级联动的时候,用的是easyui的tree结构,但是需要一次性全部加载,不是按需加载,性能不好,退而求其之,用多个下拉框做 eayui的combobox 有onSelect ...
随机推荐
- HTTP长连接(Comet)实现方式示例
昨天看了comet的介绍后,虽然大概知道了comet的原理,不过没实际用过还是不太清楚,于是今天又在网上翻了一下别的网友共享的comet实现http长连接的例子,在 Comet Server Push ...
- 【转】Linux mount/unmount命令
转自:http://www.cnblogs.com/xd502djj/p/3809375.html 格式:mount [-参数] [设备名称] [挂载点] 其中常用的参数有:-a 安装在/etc/fs ...
- Cocos2d-android (04) 执行多个动作
先后.同时执行多个动作及动作序列执行结束后的事件 import org.cocos2d.actions.instant.CCCallFunc; import org.cocos2d.actions.i ...
- 数组名的含义.xml
pre{ line-height:1; color:#1e1e1e; background-color:#f0f0f0; font-size:16px;}.sysFunc{color:#627cf6; ...
- 在Jenkins中使用Git Plugin访问Https代码库失败的问题
最近需要在Jenkins上配置一个Job,SCM源是http://git.opendaylight.org/gerrit/p/integration.git 于是使用Jenkins的Git Plugi ...
- Name-based virtual servers 给予名称的虚拟服务
nginx first decides which server should process the request. Let’s start with a simple configuration ...
- 《Linux命令行与shell脚本编程大全》 第一、二章 学习笔记
第一章:初识Linux shell Linux内核负责以下4个主要功能: 1.系统内存管理 2.软件程序管理 3.硬件设备管理 4.文件系统管理 1.系统内存管理 内核不仅管理服务器上的可用物理内存, ...
- 【boost】使用lambda表达式和generate_n生成顺序序列
程序中经常用到顺序序列(0,1,2,3,4,5,6.....),一直羡慕python有range这样的函数,而C++中通常只有用循环来处理这种初始化. 现在,结合boost库lambda(虽然差C++ ...
- C# html互转mht
using System;using System.Runtime.InteropServices;using System.Text;using System.IO;namespace HTMLCo ...
- php 解压 .gz 文件
在百度搜索到的 PharData 类和 ZipArchive 都是解压不了 .gz 的文件的,后来在 google 搜索到解决方法,问题解决. try { $phar = new PharData($ ...