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 ...
随机推荐
- Visual Assist的破解与安装
转载[PYG成员作品] [2016-09-26更新]Visual Assist X10.9.2112-Cracked.By.PiaoYun/P.Y.G 近期的一个稳定版本的破解方式: VA原版, VA ...
- Yii系列教程(四):使用Memcache保存会话
1环境准备 安装Memcached服务端: yum -y installmemcached.x86_64 安装PHP-Memcache扩展: yum -y installphp-pecl-memcac ...
- 转:使用 JMeter 完成常用的压力测试
使用 JMeter 完成常用的压力测试 就目前 Java EE 的平台下开发的软件来说,这种节点通常可能是:Web 服务器.数据库服务器和 JMS 服务器.它们都是请求主要发生的地点,请求频率较其它的 ...
- 三年程序学习之二:(对web初认识)
接着上一篇讲,之后第二天我就来公司上班了,主要是前端,CSS+DIV,table,网站维护之类的,这样的日子过了将近3个星期,一直没什么进展,自己也学不到什么技术,不过我觉得CSS+DIV我算是基础的 ...
- java基础语法知识
1.用消息框显示加法计算结果 package plusdialog; import javax.swing.JOptionPane; // import class JOptionPane publ ...
- 移动端的日期插件 mobiscroll 2.14.4 破解版
官方报价695美元 http://mobiscroll.com/pricing 这个 mobiscroll 2.14.4 破解版 包括datetime和calendar组件,包括mobiscroll和 ...
- jszs 枚举算法
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 第三百五十三天 how can I 坚持
今天买了床被子,凑合盖吧,也不是多好. 下午去了趟华北电力大学,和刘路聊了聊,还是话太多了..不好. 还有买了桶油和大米.. 洗澡,睡觉,一天过得好快.
- 【转】玩转log4j
原文链接:http://www.cnblogs.com/shenliang123/archive/2012/05/02/2479286.html 由于最近正在扩展卫生局考务系统,由于上一次使用过一次该 ...
- Linux下的hostname命令详解
1.临时修改: #hostname ***** //*****为修改的hostname 2.永久修改: # vi /etc/sysconfig/networkNETWORKING=yesHOSTNAM ...