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 ...
随机推荐
- hdu 4876(剪枝+暴力)
题意:给定n,k,l,接下来给出n个数,让你从n个数中选取k个数围成一圈,然后从这k个数中随意选出连续的m(m>=1&&m<=k)个数进行异或后得到[l,r]区间的所有值, ...
- 程序语言的奥妙:算法解读 ——读书笔记
算法(Algorithm) 是利用计算机解决问题的处理步骤. 算法是古老的智慧.如<孙子兵法>,是打胜仗的算法. 算法是古老智慧的结晶,是程序的范本. 学习算法才能编写出高质量的程序. 懂 ...
- Scrum流程
敏捷Scrum流程图: Sprint Planing Meeting: 1.Next Spring Goal; 2.Sprint Backlog; 3.Updated Product Backlog; ...
- js中location.search、split()HTML5中localStorage
1. location.search在客户端获取Url参数的方法 location.search是从当前URL的?号开始的字符串 如:http://www.baidu.com/s?wd=baidu&a ...
- 通过xshell 设置代理上网
前言: 前段时间,选修了一门并行计算,老师给我们每个人分配了一个linux登录账号,通过这个账号,可能登录学校的一台linux . 一次偶然的机会,了解到可以通过xshell , ssh服务器给本地开 ...
- debug 64bit dump of a 32bit process in windows 7 64bit
In Windows 7 the TaskMgr provides one easy way to create dump for the applications. You can right cl ...
- [转]天龙八部的BillingServer
从字面上看,Billing是计费的,应该处理玩家在线时间或者包月之类.但是天龙八部是免费游戏,不需要算时间来计费.从代码中看,BillingServer也比较简单,它有一个连接到Web服务器,并监听一 ...
- iOS app的webview注入JS遇到的坑
webview使用JSContext 向网页js注入时时机要选为网页加载完成后即放在 -(void)webViewDidFinishLoad:(UIWebView *)webView 方法 : -(v ...
- [WinForm] 使用 WebBrowser 操作 HTML 頁面的 Element-摘自网络
前言 在 Window Form 應用程式如果需要瀏覽網頁時可以崁入 WebBrowser 控制項,但如果需要操作崁入的 HTML 的網頁元素,就需要額外的操作,以下紀錄幾種操作 HTML 元素的方法 ...
- incompatible