js操作HTML下拉列表标签

判断select选项中 是否存在Value="paraValue"的Item
向select选项中 加入一个Item
从select选项中 删除一个Item
删除select中选中的项
修改select选项中 value="paraValue"的text为"paraText"
设置select中text="paraText"的第一个Item为选中
设置select中value="paraValue"的Item为选中
得到select的当前选中项的value
得到select的当前选中项的text
得到select的当前选中项的Index
清空select的项
js 代码
// 1.判断select选项中 是否存在Value="paraValue"的Item       
function jsSelectIsExitItem(objSelect, objItemValue) {       
    var isExit =false;       
    for (var i =0; i < objSelect.options.length; i++) {       
        if (objSelect.options[i].value == objItemValue) {       
            isExit =true;       
            break;       
        }       
    }       
    return isExit;       
}        
  
// 2.向select选项中 加入一个Item       
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {       
    //判断是否存在       
    if (jsSelectIsExitItem(objSelect, objItemValue)) {       
        alert("该Item的Value值已经存在");       
    }else{       
        var varItem =new Option(objItemText, objItemValue);     
        objSelect.options.add(varItem);    
        alert("成功加入");    
    }       
}       
  
// 3.从select选项中 删除一个Item       
function jsRemoveItemFromSelect(objSelect, objItemValue) {       
    //判断是否存在       
    if (jsSelectIsExitItem(objSelect, objItemValue)) {       
        for (var i =0; i < objSelect.options.length; i++) {       
            if (objSelect.options[i].value == objItemValue) {       
                objSelect.options.remove(i);       
                break;       
            }       
        }       
        alert("成功删除");       
    }else{       
        alert("该select中 不存在该项");       
    }       
}   
  
  
// 4.删除select中选中的项   
function jsRemoveSelectedItemFromSelect(objSelect) {       
    var length = objSelect.options.length -1;   
    for(var i = length; i >=0; i--){   
        if(objSelect[i].selected ==true){   
            objSelect.options[i] =null;   
        }   
    }   
}     
  
// 5.修改select选项中 value="paraValue"的text为"paraText"       
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {       
    //判断是否存在            if (jsSelectIsExitItem(objSelect, objItemValue)) {                for (var i =0; i < objSelect.options.length; i++) {                    if (objSelect.options[i].value == objItemValue) {                        objSelect.options[i].text = objItemText;                        break;                    }                }                alert("成功修改");            }else{                alert("该select中 不存在该项");            }        }           // 6.设置select中text="paraText"的第一个Item为选中        function jsSelectItemByValue(objSelect, objItemText) {                //判断是否存在            var isExit =false;            for (var i =0; i < objSelect.options.length; i++) {                if (objSelect.options[i].text == objItemText) {                    objSelect.options[i].selected =true;                    isExit =true;                    break;                }            }                  //Show出结果            if (isExit) {                alert("成功选中");            }else{                alert("该select中 不存在该项");            }        }           // 7.设置select中value="paraValue"的Item为选中    document.all.objSelect.value = objItemValue;           // 8.得到select的当前选中项的value    var currSelectValue = document.all.objSelect.value;           // 9.得到select的当前选中项的text    var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;           // 10.得到select的当前选中项的Index    var currSelectIndex = document.all.objSelect.selectedIndex;           // 11.清空select的项    document.all.objSelect.options.length =0;

时间: 2024-10-10 23:35:48

js操作HTML下拉列表标签的相关文章

JS操作select标签

主要利用这个来实现省市区三级联动的 我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速度还是可以的,用户基本体会不到带来的轻微卡顿,还有种方式是把数据直接写在本地的js中作为数组存放起来,但是我的数据已经在数据库中,所以这种方式被我否定了,但是我认为这种方式运行速度应该比我的快. 下面是JS操作select的几种用法,常用的我就记录一下. 1.动态创建select function

JS操作标签的值、属性、样式。

DOM操作要先获取元素或标签等节点: document.getElementById('id'); 对表单如input进行操作: 获取值var users=document.getElementById('user').value; 赋值users=document.getElementById('user').value='abcdefg' 非表单使用innerHTML替换value: innerHTML:返回的是标签内的html内容,包含html标签 var dicy.innerHTML="

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条 一丶jQ操作标签内文本 html() 标签元素中的内容 /** 替换的内容可以使一个js对象,jq对象,文本 **/ /* 获取值:获取选中标签元素的所有内容 ,包括标签*/ $('ul').html() " <li>1</li> <li&g

selenium 常见操作,使用 js 操作-日期框及文本框

在使用 selenium 对页面进行相关操作时,有时候会遇到以下三种情况: 1.日期框:无法直接输入文本,必须要选择某一天的日期并点击才会填入文本框; 2.检索框:可以直接输入文本,但必须要点击根据输入的文本检索出来的下拉列表的某-项; 3.置灰的文本框:无法直接输入文本 按照常规套路,我们通常都会采取各种元素定位方法按照操作步骤一步步来实现 ,但是遇到上面三种奇葩,页面定位操作就显得有些捉襟见肘了,因此我们可以通过 selenium 中的 javascript 操作来处理它. 我们以12306

Js操作DOM的方式及获取浏览器的宽高

我们在为页面加入一些动态效果或实现一些脚本功能时,需要对文档body中的元素进行操作,也就是,我们需要使用js或jQuery来对dom操作.下面呢,我说一下js是怎样对dom操作的. document.write(),这既可以向文档输出文本,也可以写入代码来添加元素. 获取需要操作的元素: 利用id获取就是:document.getElementById("name"); 利用class获取就是:document.getElementsByClassName("name&qu

JS 操作Dom节点之样式

为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式: <!--body --><div style="width: 30px;background-color: #ff6a00;">我就是傻里傻气的,完全素颜!</div> 1 //内联样式优先级最高,通过style获取的样式是最准确的 2 var el

js实现给一个标签添加多个class值

在写html跟css的时候,我们会给一些标签起一些class的名字,但是在写js的时候可能也会通过cssName操作css样式,如果只是平常的element.className = "value";的话,那么之前的定义的class会被置空,css中的样式就会受到影响,所以,在js中如果有微调css的话,尽量使用element.style来改变.但是如果真的是使用element.className = "value";的话也可以在js中实现给一个标签添加多个class

纯JS实现的3D标签云,不依赖任何第三方库,支持移动页面

<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span> <html xmlns="

js打开新的标签页

CreateTime--2017年8月23日11:42:39Author:Marydon window.open(URL) 举例: <!-- 方式一:推荐使用 --> <a href="javascript:;" onclick="window.open('<c:url value="/uploadfile/134557/000225326/进击的巨人-三笠.jpg"/>')"> 操作js打开新的标签页 <