js 操作select 下拉框

合集下载

js实现可输入可选择的select下拉框

js实现可输⼊可选择的select下拉框本⽂实例为⼤家分享了可输⼊可选择的select下拉框，供⼤家参考，具体内容如下1、原理：1.1将input输⼊框和select框合并在⼀起，但是显⽰出向下点击的按钮:这种⽐较容易做到1.2出现输⼊值能够⾃动匹配的功能动态的加载⼀个临时的div出现在该input下⽅，当点击页⾯中的空⽩地⽅，div隐藏。

1.3代码：<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><script language="Javascript" src="/reserve/common/js/jquery-1.7.2.min.js"></script></head><body><div style="z-index:1" ><span style="margin-left:100px;width:18px;overflow:hidden;"><select id='editable-Select--<%=i %>' name="editable-Select" onClick="getkindcode(this)"style="width:185px;height:21px;margin-left:-100px;" ><%ArrayList acckindList = akc.accKindList();for(int j = 0;j<acckindList.size();j++){akdto = (accKindDto)acckindList.get(j);%><option value="<%=akdto.getAcckindcode() %>--<%=akdto.getAcckindname() %>"><%=akdto.getAcckindcode() %>--<%=akdto.getAcckindname() %></option><%} %></select></span><input type="text" name="box" id='box_<%=i %>' onKeyup="changeText(this)"style="width:165px;height:15px;margin-left:-190px;"><script type="text/javascript">function changeText(obj){var len = document.getElementById('editable-Select--0').options.length ;//alert(len);var totalValues;for(i=0;i<len;i++){totalValues+= document.getElementById('editable-Select--0').options[i].text+',';}//alert("totalValues.length=="+totalValues.length);//alert("totalValues=="+totalValues);var inputId= obj.id;var inv = document.getElementById(obj.id).value;//showTip(obj.id,totalValues);var _inputNode = document.getElementById(inputId);_inputValue = _inputNode.value;if(/^[\s]*$/.test(_inputValue)){//alert("kongge");return;}_parentNode = _inputNode.parentNode;_divNode = document.createElement("div");var config = {backgroundColor: "#FFFFFF",hoverBackgroundColor: "#BFEFFF",divHeight: "100px",divWidth: "180px",divBorder: "1px solid gray",overflowY: "scroll",inputHeight: 20};//console.log(_inputNode);--不兼容//alert(_inputNode);$.extend(true,config);//如果已经存在了divNode 则删除var _lastDivNode = document.getElementById(inputId+"_div");//$("#"+inputId+"_div")[0];if(_lastDivNode)_parentNode.removeChild(_lastDivNode);var _offsetPosition = getPosition(_inputNode);//显⽰待选div样式_divNode.id = inputId+"_div";//alert("div---:"+_divNode.id);_divNode.style.height = config.divHeight;_divNode.style.width = config.divWidth;_divNode.style.overflowY = config.overflowY;_divNode.style.display = "block";_divNode.style.border = config.divBorder;_divNode.style.position = "absolute";_divNode.style.top = (_offsetPosition.y+config.inputHeight)+"px";_divNode.style.left = _offsetPosition.x+"px";//第⼀次加载的时候初始化样式⽂件//var _headNode = $("head")[0];//alert("_headNode=="+_headNode);//var _cssNode = document.createElement("style");//var _cssContent = "#"+_divNode.id+" div{background-color:"+config.backgroundColor+";}";//_cssContent += "#"+_divNode.id+" div:hover{background-color:"+config.hoverBackgroundColor+";}";//alert("_cssContent=="+_cssContent);//_cssNode.innerHTML = _cssContent;// ie8不识别innerHTML 没有背景颜⾊是这⾥的问题//alert("_cssNode=="+_cssNode.innerHTML);//兼容ie：动态加载样式function includeStyleElement(styles,styleId) {if (document.getElementById(styleId)) {return}var style = document.createElement("style");style.id = styleId;(document.getElementsByTagName("head")[0] || document.body).appendChild(style);if (style.styleSheet) { //for iestyle.styleSheet.cssText = styles;} else {//for w3cstyle.appendChild(document.createTextNode(styles));}}var styles = "#"+_divNode.id+" div{background-color:"+config.backgroundColor+";}";styles+="#"+_divNode.id+" div:hover{background-color:"+config.hoverBackgroundColor+";}";includeStyleElement(styles,inputId+"_style");//alert(styles);// _headNode.appendChild(document.createTextNode(cssContent));_divNode.innerHTML = "";var _divHtml = "";var optionobj = document.getElementById('editable-Select--0').options;for(var i=0;i<optionobj.length;i++){var _tempValue = optionobj[i].value;if(isIncluded(_tempValue,_inputValue)){_divHtml += "<div onclick='_inputDivClick(\""+inputId+"\",\""+_divNode.id+"\",\""+_tempValue+"\")'>"+_tempValue+"</div>"; }}_divNode.innerHTML = _divHtml;//alert("_divNode内容=="+_divNode.innerHTML);if(_divNode.innerHTML == null || _divNode.innerHTML == "" ){ hide(inputId);}_parentNode.appendChild(_divNode);function hide(inputId) {//alert("hide()----inputid=="+inputId);var div_id = inputId+"_div";//document.getElementById(div_id).style.visibility = 'hidden';$('#'+div_id).css('display','none');}/*** _inputDivClick 当选中⼀个下拉列表选项时触发* inputNodeId: 输⼊框的id* divNodeId: ⾃动创建的div的id* value: 待选值*//* function _inputDivClick(inputNodeId,divNodeId,value){alert("_inputDivClick-----");var inputNode = document.getElementById(inputNodeId);alert("inputNode=="+inputNode.value);var divNode = document.getElementById(divNodeId);//var divNode = $("#"+divNodeId)[0];inputNode.value = value;alert("inputNode.value 选择点击值=="+inputNode.value);inputNode.parentNode.removeChild(divNode);} *//*** isInclude⽅法⽤于测试source是否包含有pattern这个字符串* source: 待测试的字符串* pattern:⽂本框输⼊的值*/function isIncluded(source,pattern){var _reg = new RegExp(".*"+pattern+".*");return _reg.test(source);}//将要获取绝对位置的标签传进去，返回⼀个包含x和y属性的对象 function getPosition(e){var t=e.offsetTop;var l=e.offsetLeft;while(e=e.offsetParent){t+=e.offsetTop;l+=e.offsetLeft;}var point = eval("({x:"+l+",y:"+t+"})");return point;}}</script><script type="text/javascript">/*** _inputDivClick 当选中⼀个下拉列表选项时触发* inputNodeId: 输⼊框的id* divNodeId: ⾃动创建的div的id* value: 待选值*/function _inputDivClick(inputNodeId,divNodeId,value){var inputNode = document.getElementById(inputNodeId);//alert("inputNode=="+inputNode.value);var divNode = document.getElementById(divNodeId);//var divNode = $("#"+divNodeId)[0];inputNode.value = value;//alert("inputNode.value 选择点击值=="+inputNode.value);inputNode.parentNode.removeChild(divNode);}function getkindcode(obj){var index = obj.selectedIndex; // 选中索引var text = obj.options[index].text; // 选中⽂本var Kindvalue = obj.options[index].value; // 选中值var acckindid=obj.id;//alert(acckindid);//alert(Kindvalue);var inputid = "box_"+acckindid.split("--")[1];//alert("inputid："+inputid);var inputobj = document.getElementById(inputid);inputobj.value = Kindvalue;//alert("inputvalue2 ："+inputobj.value);}</script><font color="red" size="2px">* </font><font size="2px">输⼊格式：代码&&名称</font></div><script type="text/javascript">var boxs = document.getElementsByName("box");var num = boxs.length;/* 点击空⽩出隐藏临时div */$(document).bind('click',function(e){var e = e || window.event; //浏览器兼容性var elem = e.target || e.srcElement;//alert("elem.id=="+elem.id);for(var i=0;i<num;i++){var divID = "box_"+i+"_div";while (elem) { //循环判断⾄跟节点，防⽌点击的是div⼦元素if (elem.id && elem.id==divID) {return;}elem = elem.parentNode;}$('#'+divID).css('display','none'); //点击的不是div或其⼦元素}});</script></body></html>1.4效果：option的值是从数据库中读出来的，页⾯会有很多这样的，所以每个inpout的id说循环的。

改变HTML下拉框SELECT选项的多种方法

改变HTML下拉框SELECT选项的多种方法一、使用JavaScript:1. 使用innerHTML属性改变SELECT选项:通过JavaScript的innerHTML属性，可以直接改变SELECT元素的innerHTML，从而改变其中的选项。

例如：```html<select id="mySelect"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select><button onclick="changeOptions(">改变选项</button><script>function changeOptionvar selectElement = document.getElementById("mySelect");selectElement.innerHTML = '<option value="4">选项4</option>' +'<option value="5">选项5</option>';}</script>```2. 使用createElement和appendChild方法动态添加选项:可以使用JavaScript的createElement和appendChild方法，动态创建选项元素，并将其添加到SELECT元素中。

例如：```html<select id="mySelect"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select><button onclick="addOption(">添加选项</button><script>function addOptiovar selectElement = document.getElementById("mySelect");var newOption = document.createElement("option");newOption.value = "4";newOption.text = "选项4";selectElement.appendChild(newOption);}</script>```二、使用CSS:1. 使用display属性控制选项的显示和隐藏:可以使用CSS的display属性，通过控制选项的display值，来改变选项的显示和隐藏。

多选下拉框（select下拉多选）

多选下拉框（select下拉多选）⽅法⼀：使⽤.js和 .css实现HTML代码： <select id='checkedLevel' style="width:120px;height:28px;" multiple="multiple"> <option value="1">选项1</option> <option value="2">选项1</option> <option value="3">选项1</option> <option value="4">选项1</option> <option value="5">选项1</option> <option value="6">选项1</option> <option value="7">选项1</option> </select>js代码： $('#checkedLevel').multipleSelect({ addTitle: true, //⿏标点悬停在下拉框时是否显⽰被选中的值 selectAll: false, //是否显⽰全部复选框，默认显⽰ name: "质控级别", selectAllText: "选择全部", //选择全部的复选框的text值 allSelected: "全部", //全部选中后显⽰的值 //delimiter: ', ', //多个值直接的间隔符，默认是逗号 placeholder: "质控级别" //不选择时下拉框显⽰的内容 });//设置默认选中:其中数组中多个值⽤逗号分隔，值是option的value $("#checkedLevel").multipleSelect('setSelects', [1001,1002]);设置选中后关闭下拉框：$('#selectJcjb').multipleSelect("close");//其他的⽅法，可到js中去查看⽅法名，根据实际情况进⾏调⽤。

使用js实现一个可编辑的select下拉列表

使⽤js实现⼀个可编辑的select下拉列表复制代码代码如下:<select id="name" name="name"onkeydown="clearSelect(this,event);"onkeypress="writeSelect(this,event);" style="width:70px;"><option value=""></option><option value="test1">test1</option><option value="test2">test2</option><option value="test3">test3</option></select><script>function clearSelect(obj,e){opt = obj.options[0];opt.selected = "selected";if((e.keyCode== 8) ||(e.charCode==8))//使⽤退格（backspace）键实现逐字删除的编辑功能{opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0);opt.text = opt.value;}if((e.keyCode== 46) ||(e.charCode==46))//使⽤删除（Delete）键实现逐字删除的编辑功能{opt.value = "";opt.text = opt.value;}//还可以实现其他按键的响应}function writeSelect(obj,e){opt = obj.options[0];opt.selected = "selected";opt.value += String.fromCharCode(e.charCode||e.keyCode);opt.text = opt.value;}function forbidBackSpace()//为了在IE中，避免backspace的返回上⼀页功能，和本下拉框的编辑功能冲突，需要禁掉backspace的功能。

js最简单的 select代码

js最简单的 select代码【最新版】目录1.JavaScript 简介2.select 元素的定义3.最简单的 select 代码示例4.select 元素的属性5.select 元素的用法正文1.JavaScript 简介JavaScript 是一种脚本语言，通常用于开发 Web 应用程序。

它可以在浏览器中运行，并与 HTML 和 CSS 一起构成了 Web 开发的三大基础技术。

JavaScript 具有丰富的语法特性和强大的功能，可以用来实现各种复杂的交互效果。

2.select 元素的定义在 HTML 中，select 元素是一个用于创建下拉列表的特殊元素。

它允许用户从一系列选项中选择一个或多个选项，并将所选内容提交给服务器进行处理。

select 元素通常与 option 元素一起使用，option 元素用于定义下拉列表中的具体选项。

3.最简单的 select 代码示例下面是一个最简单的 select 代码示例：```html<select><option value="option1">选项 1</option><option value="option2">选项 2</option><option value="option3">选项 3</option></select>```在这个例子中，我们创建了一个包含三个选项的下拉列表。

用户可以从中选择一个选项，并将所选内容提交给服务器进行处理。

4.select 元素的属性select 元素具有许多属性，用于定义下拉列表的样式和行为。

以下是一些常用的 select 属性：- `name`：定义下拉列表的名称，用于区分不同的下拉列表。

- `id`：定义下拉列表的 ID，用于在 JavaScript 中引用该下拉列表。

jquery操作select下拉框的多种方法(选中取值赋值等)精品

jquery操作select下拉框的多种方法（选中取值赋值等）精品jQuery是一个非常强大的JavaScript库，它提供了很多方便的方法来操作HTML元素，包括select下拉框。

下面我将介绍几种常用的方法来操作select下拉框，包括选中选项、取值和赋值等。

1.选中选项使用jQuery可以很方便地选中select下拉框的选项。

下面是几种常用的方法：- 使用`val(`方法选中指定值的选项：```javascript$("#select").val("option-value");```其中`#select`是select元素的ID，`option-value`是需要选中的选项的值。

- 使用`prop(`方法根据选项的值或文本选中选项：```javascript$("#select option[value='option-value']").prop("selected", true);$("#select option:contains('option-text')").prop("selected", true);```这两种方法都是根据选项的值或文本来选中选项。

第一种方法中`option-value`是需要选中的选项的值，第二种方法中`option-text`是需要选中的选项的文本。

- 使用`attr(`方法根据选项的值或文本选中选项：```javascript$("#select option[value='option-value']").attr("selected", "selected");$("#select option:contains('option-text')").attr("selected", "selected");```这两种方法和前面的方法类似，只是使用的是`attr(`方法来设置`selected`属性。

extjs中select用法

extjs中select用法【原创版】目录1.Extjs 简介2.Extjs 中的 select 元素3.Select 的常用属性4.Select 的常用方法5.Select 的事件处理6.实例代码演示正文【1.Extjs 简介】Extjs 是一个基于 JavaScript 的 UI 组件库，可以用来快速开发富客户端应用。

它提供了大量可复用的 UI 组件，如表单、表格、树形菜单等，极大地简化了开发过程。

【2.Extjs 中的 select 元素】在 Extjs 中，select 元素是一个下拉选择框，允许用户从一组可选项中选择一个值。

它可以用于表单控件，也可以用于其他场景，如数据绑定和远程数据获取。

【3.Select 的常用属性】以下是一些常用的 select 属性：- id：select 元素的 ID，用于标识和选取元素。

- name：select 元素的名称，用于数据绑定和提交表单。

- style：select 元素的样式，可以通过 CSS 进行设置。

- store：select 元素的数据源，用于填充下拉列表。

- displayField：select 元素的下拉列表项的显示字段。

- valueField：select 元素的下拉列表项的值字段。

- emptyText：select 元素在下拉列表为空时的提示文本。

- trigger：select 元素的触发方式，可选值有"all"、"manual"、"mouseover"和"mouseout"。

【4.Select 的常用方法】以下是一些常用的 select 方法：- getValue()：返回 select 元素当前选中的值。

- setValue(value)：设置 select 元素的选中值。

- getStore()：返回 select 元素的数据源。

- setStore(store)：设置 select 元素的数据源。

select 下拉列表的JS操作

select 下拉列表的JS操作2009-01-05 23:53引用内容<select id="ddlResourceType" onchange="getvalue(this)"></select>//动态删除select中的所有options：document.getElementById("ddlResourceType").options.length=0;//动态删除select中的某一项option：document.getElementById("ddlResourceType").options.remove(indx);//动态添加select中的项option:document.getElementById("ddlResourceType").options.add(new Option(text,value));//上面在IE和FireFox都能测试成功，希望以后你可以用上。

//其实用标准的DOM操作也可以，就是document.createElement，appendChild，removeChild之类的。

//取值方面function getvalue(obj){var m=obj.options[obj.selectedIndex].valuealert(m);//获取valuevar n=obj.options[obj.selectedIndex].textalert(n);//获取文本}引用内容var $val=function(tagName){return document.getElementById(tagName);}//formname 下拉的NAME//变动下拉的默认项目//str 欲设为默认项目值//types 默认项目值的类型 0为text,1为valuefunction setSel(str,formname,types){var setinfo=false;for(var i=0;i<$val("formname").options.length;i++){if (types==0 && $val(formname).options[i].text==str){setinfo=true;}else if (types==1 && $val(formname).options[i].value==str){ setinfo=true;}if (setinfo==true){$val(formname).selectedIndex=i;break;}}}//更新下拉//strsel 下拉的TEXTfunction fillSel(strName,formname){var strValue="0"; //默认value 为0$val(formname).options.length=0;$val(formname)e.options[0] = new Option(strName,strValue);$val(formname).selectedIndex = 0;}//插入下拉//strName 下拉的text//strValue 下拉的value//pos 顺序 0为最上面function addOption(pos,strName,strValue,formname){// 建立Option对象var objOption = new Option(strName,strValue);if (pos == -1 & pos > $val(formname).options.length)$val(formname).options[$val(formname).options.length] = objOption;else$val(formname).add(objOption, pos);}假设下拉框叫a清空：a.length=0;我还一直以为length是只读属性，居然还藏了这么一手，牛！增加：a.options[a.length]=new Option(text,value);删除：a.options[n]=null;应用当中，删除完了往往会在后面加上一句 a.click;用以刷新。

JS操作select下拉框动态变动（创建删除获取）

JS操作select下拉框动态变动（创建删除获取）1.动态创建select复制代码代码如下:function createSelect(){var mySelect = document.createElement_x("select");mySelect.id = "mySelect";document.body.appendChild(mySelect);}2.添加选项option复制代码代码如下:function addOption(){//根据id查找对象，var obj=document.getElementByIdx_x('mySelect');//添加⼀个选项obj.add(new Option("⽂本","值"));}3.删除所有选项option复制代码代码如下:function removeAll(){var obj=document.getElementByIdx_x('mySelect');obj.options.length=0;}4.删除⼀个选项option复制代码代码如下:function removeOne(){var obj=document.getElementByIdx_x('mySelect');//index,要删除选项的序号，这⾥取当前选中选项的序号var index=obj.selectedIndex;obj.options.remove(index);}5.获得选项option的值复制代码代码如下:var obj=document.getElementByIdx_x('mySelect');var index=obj.selectedIndex; //序号，取当前选中选项的序号var val = obj.options[index].value;6.获得选项option的⽂本复制代码代码如下:var obj=document.getElementByIdx_x('mySelect');var index=obj.selectedIndex; //序号，取当前选中选项的序号var val = obj.options[index].text;7.修改选项option复制代码代码如下:var obj=document.getElementByIdx_x('mySelect');var index=obj.selectedIndex; //序号，取当前选中选项的序号var val = obj.options[index]=new Option("新⽂本","新值");8.删除select复制代码代码如下:function removeSelect(){var mySelect = document.getElementByIdx_x("mySelect"); mySelect.parentNode.removeChild(mySelect);}。

js如何获取select下拉框的value以及文本内容

js如何获取select下拉框的value以及⽂本内容select下拉框在项⽬开发中是经常⽤到的，特别是在联级菜单⽅⾯的应⽤更为⼴泛。

但是，对于⼀些初学者来说，如何获取下拉框⼦节点option的value值和⽂本内容，还是有⼀点难度的。

其他的就不说了，现在我就写⼀段代码，简单的说明⼀下如何获取value值以及⽂本内容(text),必要地添加了注释，希望对下拉框还不太熟悉的朋友有所帮助。

html代码：1 </HEAD>2 <BODY>34 书籍分类:5 <select id="s1">6 <option value="1">教学类</option>7 <option value="2">技术类</option>8 </select>9 </BODY>10 </HTML>javascrtipt代码：window.onload = function(){//⾸先获得下拉框的节点对象；var select = document.getElementById("s1");//1.如何获得当前选中的值？：var value = select.value;//2.如何获得该下拉框所有的option的节点对象var options = select.options;//注意：得到的options是⼀个对象数组//3.如何获得第⼏个option的value值?⽐如我要获取第⼀option的value,可以这样：var value1 = options[0].value;//4.如何获得第⼏个option的⽂本内容?⽐如我要获取第⼀option的⽂本,可以这样：var text1 = options[0].text;//5.如何获得当前选中的option的索引？var index = select.selectedIndex;//6.如何获得当前选中的option的⽂本内容？//从第2个问题，我们已经获得所有的option的对象数组options了//⼜从第5个问题，我们获取到了当前选中的option的索引值//所以我们只要同options[index]下标的⽅法得到当前选中的option了var selectedText = options[index].text;}。

js实现select二级联动下拉菜单

js实现select⼆级联动下拉菜单本⽂实例为⼤家分享了js实现select⼆级联动下拉菜单，供⼤家参考，具体内容如下<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><script language="JavaScript" type="text/javascript">//定义了城市的⼆维数组，⾥⾯的顺序跟省份的顺序是相同的。

JSSelect下拉框（支持输入模糊查询）

JSSelect下拉框（⽀持输⼊模糊查询）本⽂实例为⼤家分享了⽀持输⼊模糊查询的Select下拉框，供⼤家参考，具体内容如下<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Insert title here</title><Script Language="Javascript">function SelectValue(obj){document.all.box2.value = obj.options[obj.selectedIndex].text;}var j = 0;function InputValue(obj){var n = 1;var tmpObj;var src = document.all.SelectOption;var msg = document.all.msg;if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){if(obj.value!=""){msg.style.display="";msg.innerHTML="";if(msg.hasChildNodes()){msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]);}for (var i=0;i<src.length;i++){var selValue = document.createElement("div");var selText = document.createElement("div");selText.value = src(i).value;selText.innerHTML = src(i).text;if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){selText.setAttribute("id","selText"+n);selText.onmouseover=function (){this.style.backgroundColor='#003399';this.style.color ='#ffffff';}selText.onmouseout=function (){this.style.backgroundColor='#ffffff';this.style.color ='#000000';}selText.onclick=function (){document.all.box2.value = this.innerHTML;msg.style.display="none";document.getElementById("txtSection").value=this.value;}msg.appendChild(selText);n++;}}}else {document.all.msg.style.display="none";}}else {//press down keyif(event.keyCode==40){j++;for (var i=0; i<src.length; i++){tmpObj = document.getElementById("selText"+i);if(tmpObj != null){tmpObj.style.backgroundColor='#ffffff';tmpObj.style.color ='#000000';}}tmpObj = document.getElementById("selText"+j);if(tmpObj != null){tmpObj.style.backgroundColor='#003399';tmpObj.style.color ='#ffffff';}else{j = 0;}}//press up keyif (event.keyCode==38){j--;for (var i=0; i<src.length; i++){tmpObj = document.getElementById("selText"+i);if(tmpObj != null){tmpObj.style.backgroundColor='#ffffff';tmpObj.style.color ='#000000';}}tmpObj = document.getElementById("selText"+j);if(tmpObj != null){tmpObj.style.backgroundColor='#003399';tmpObj.style.color ='#ffffff';}else{j = 2;}}//press enter keyif (event.keyCode==13){tmpObj = document.getElementById("selText"+j);document.all.box2.value = tmpObj.innerHTML;msg.style.display="none";document.getElementById("txtSection").value=tmpObj.value;}}}function SelMatch(src){var currSel = document.all.box2.value;for (var i=0;i<src.length;i++){if (src(i).text==currSel){src.options(i).selected = true;}}}function NoMsg(){if(document.activeElement.id=="msg")return false;elsedocument.all.msg.style.display='none';}</Script></head><body><TABLE border=0 cellPadding=1 cellSpacing=0 width="100%"><TR><TD width="24%"><font face="Arial" size="2">查询</font></TD><TD COLSPAN=3 width="76%"><div style="position:relative;"><span style="margin-left:230px;width:18px;overflow:hidden;"><select style="HEIGHT: 22px; WIDTH: 250px; margin-left:-232px;" onchange="SelectValue(this)" onclick="SelMatch(this)" id="SelectOption" name="SelectOption" ><OPTION >ALL</OPTION><OPTION >管理者1</OPTION><OPTION >管理者2</OPTION><OPTION >管理者3</OPTION><OPTION >业务员3</OPTION><OPTION >业务员3</OPTION><OPTION >13</OPTION><OPTION >103</OPTION></select></span><input name="box2" id="box2" style="width:230px;position:absolute;left:0px;" onkeyup="InputValue(this)" onblur="NoMsg()" onfocus="this.select();InputValue(this)" value="" > <div id="msg" style="border:1px solid green; font-size :14PX;white-space:nowrap;overflow:hidden;width:230px;position:absolute;left:0px;top:20px;display:none"></div></div><Input Type="Hidden" Name="txtSection" id="txtSection"></TD></TR></TABLE></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

js操作select下拉框

js操作select下拉框1.判断select选项中是否存在Value="paraValue"的Item2.向select选项中加⼊⼀个Item3.从select选项中删除⼀个Item4.修改select选项中 value="paraValue"的text为"paraText"5.设置select中text="paraText"的第⼀个Item为选中6.设置select中value="paraValue"的Item为选中7.得到select的当前选中项的value8.得到select的当前选中项的text9.得到select的当前选中项的Index10.清空select的项11.获取text的值-------------------------------------------//1.判断select选项中是否存在Value="paraValue"的Itemfunction 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选项中加⼊⼀个Itemfunction jsAddItemToSelect(objSelect,objItemText,objItemValue){//判断是否存在if(jsSelectIsExitItem(objSelect,objItemValue)){alert("该Item的Value值已经存在");}else{var varItem = new Option(objItemText,objItemValue);// objSelect.options[objSelect.options.length] = varItem;objSelect.options.add(varItem);alert("成功加⼊");}}//3.从select选项中删除⼀个Itemfunction 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选项中 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中不存在该项");}}//5.设置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中不存在该项");}}//6.设置select中value="paraValue"的Item为选中//document.all.objSelect.value = objItemValue;//7.得到select的当前选中项的value//var currSelectValue = document.all.objSelect.value;//8.得到select的当前选中项的text//var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text; //9.得到select的当前选中项的Index//var currSelectIndex = document.all.objSelect.selectedIndex;//10.清空select的项// document.all.objSelect.options.length = 0;//获取select的text的值$('bxhjxx').options[$('bxhjxx').selectedIndex].text。

Javascriptselect下拉框操作常用方法

Javascriptselect下拉框操作常⽤⽅法function AddDropDownList(id,fatherCtl){if(!document.getElementById(id)){var ddl = document.createElement('select');ddl.setAttribute("id",id);if(fatherCtl&&document.getElementById(fatherCtl))document.getElementById(fatherCtl).appendChild(ddl);elsedocument.body.appendChild(ddl);}}//删除指定的下拉框function RemoveDropDownList(id){var ctl = document.getElementById(id);if(ctl)ctl.parentNode.removeChild(ctl);}//给下拉框添加选项function AddDDDLOption(id,text,value){var ctl = document.getElementById(id);if(ctl){ctl.options[ctl.options.length] = new Option(text,value);}}//删除所有选项function RemoveAllDDLOptions(id){var ctl = document.getElementById(id);if(ctl){ctl.options.length=0;}}//删除指定索引的选项function RemoveDDLOption(id,index){var ctl=document.getElementById(id);if(ctl && ctl.options[index]){ctl.options[index]=null;}}//获取下拉框选择的值function GetDDLSelectedValue(id){var ctl = document.getElementById(id);if(ctl){return ctl.options[ctl.selectedIndex].value;}}//获取下拉框选择的⽂本function GetDDLSelectedText(id){var ctl = document.getElementById(id);if(ctl){return ctl.options[ctl.selectedIndex].text;}}。

jsSelect下拉列表框进行多选、移除、交换内容的具体实现方法

jsSelect下拉列表框进⾏多选、移除、交换内容的具体实现⽅法复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><span class='wp_keywordlink_affiliate'><a href="tag/html" title="查看 html 中的全部⽂章" target="_blank">html</a></span>4/loose.dtd"><<span class='wp_keywordlink_affiliate'><a href="tag/html" title="查看 html 中的全部⽂章" target="_blank">html</a></span>><head><title>Select下拉列表框进⾏多选、移除、交换内容</title><meta http-equiv="Content-Type" content="text/<span class='wp_keywordlink_affiliate'><a href="tag/html" title="查看 html 中的全部⽂章" target="_blank">html</a></span>; charset=gb2312"></head><body style="font-size:12px"><form name="form1" method="post" action=""><table width="380" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="150"><table width="150" border="0" cellpadding="1" cellspacing="1" bgcolor="#CAFAFC"><tr><td height="25" background="wp-content/uploads/2012/05/79760-772704496-8.gif" bgcolor="#FFFFFF"> 请选择：</td></tr><tr><td align="center" bgcolor="#FFFFFF"><select name="sel_place1" size="6" multiple id="sel_place1"style="width:100px " ><option value="sel1">江苏省</option><option value="sel2">⼴东省</option><option value="sel3">河南省</option><option value="sel4">吉林省</option><option value="sel5">浙江省</option></select></td></tr></table></td><td width="80" align="center" valign="bottom"><input name="sure1" type="button" id="sure1"onClick="allsel(document.form1.sel_place2,document.form1.sel_place1);" value="<<"><input name="sure2" type="button" id="sure2"onClick="allsel(document.form1.sel_place1,document.form1.sel_place2);" value=">>" align="center" height="2"></td><td width="150"><table width="150" border="0" cellpadding="1" cellspacing="1" bgcolor="#CAFAFC"><tr><td height="25" background="wp-content/uploads/2012/05/79760-772704496-8.gif" bgcolor="#FFFFFF"> 请选择：</td></tr><tr><td align="center" bgcolor="#FFFFFF"><select name="sel_place2" size="6" multiple id="sel_place2"style="width:100px "></select></td></tr></table></td></tr></table></form><script language="javascript">function allsel(n1,n2){while(n1.selectedIndex!=-1){var indx=n1.selectedIndex;var t=n1.options[indx].text;n2.options.add(new Option(t)); n1.remove(indx);}}</script></body></html></td></tr></table>。

javascript中select下拉框的用法总结

javascript中select下拉框的⽤法总结本⽂针对开发项⽬中遇到的问题，进⾏了汇总问题1：如何选择select的option⾥⾯的值？⾸先会⽤到⼀个⽅法 onchange（）；这个⽅法主要⽤于触发，选择框内容改变时间实现代码：<!doctype html><html><head lang="en"><meta charset="UTF-8"></head><body><select onchange="test(event)"><option>安静</option><option>晴天</option><option>七⾥⾹</option></select><script type="text/javascript">function test (e) {var e = event ? event : window.event;alert(e.target.value);}</script></body></html>问题2：可是在开发中，我们⼀般选择了内容只是为了显⽰，⽽真正要做的是和后台进⾏交互数据传输，这时候，我们为了尽可能减少http数据传输，所以⼀般会传 id 等作为数据传输标志，如何做？开发中，option⼀般都是动态创建的，那么这时候，我们只需要给你动态创建⼀个⾃定义属性。

那么如何获取⾃定义属性呢？<!doctype html><html><head lang="en"><meta charset="UTF-8"></head><body><select onchange="test(event)" id="sel"></select><script type="text/javascript">//定义内容的json数据，⼀般从后台获取var data = [{name: '晴天',id: '1'},{name: '安静',id: '2'},{name: '七⾥⾹',id: '3'}];createOption('sel',data);//创建optionfunction createOption(parentId, data){var parentId = document.getElementById(parentId);for(var i=0; i<data.length; i++){var opt = document.createElement('option');//设置option的值opt.innerHTML = data[i].name;//定义option的⾃定义值opt.setAttribute('dataid', data[i].id);parentId.appendChild(opt);}}//选取⾃定义属性的⽅法function test (e) {var e = event ? event : window.event;var target = e.target;var index = target.selectedIndex;alert("我的id="+target[index].getAttribute('dataid'));}</script></body></html>结果图如下：如果⼤家还想深⼊学习，可以点击、进⾏学习。

原生js实现select下拉框选择

原⽣js实现select下拉框选择原⽣js实现select下拉框选择最近在做⼀个项⽬需要兼容到ie不同版本，在使⽤select时遇到了各种问题。

后来索性就⾃⼰使⽤原⽣js实现了这样⼀个下拉框，话不多说，直接上代码吧<html lang="en"><head><meta charset="UTF-8"><title>⾃定义select</title></head><style>*{margin: 0;padding: 0;}#main{position: relative;width: 280px;height: 42px;}#content{width: 280px;height: 42px;line-height: 42px;padding-left: 10px;background: rgb(255, 255, 255);border-radius: 2px;border: 1px solid rgb(221, 221, 221);font-size: 16px;font-family: MicrosoftYaHei;color: rgb(51, 51, 51);cursor: pointer;}#selectImg{position: absolute;top:13px;right: 10px;cursor: pointer;}#selectItem{display: none;border: 1px solid #eee;width: 290px;}#selectItem ul{list-style: none;}#selectItem ul li{height: 30px;line-height: 30px;padding-left: 10px;cursor: pointer;}#selectItem ul li:hover{background-color:#f5f7fa;}</style><body><div id="main"><div id="content"></div><img id="selectImg" src="./icon_select.png" alt=""><div id="selectItem"></div></div></body><script>var data = [{name:'北京',value:'1'},{name:'上海',value:'2'},{name:'⼴州',value:'3'}]var content = document.getElementById('content');var selectImg = document.getElementById('selectImg');var selectItem = document.getElementById('selectItem');var ul = document.createElement('ul');selectItem.appendChild(ul);for(var i = 0; i < data.length; i++){var li = document.createElement('li');li.setAttribute('data-value',data[i].value);li.innerText = data[i].name;ul.appendChild(li);}/*** 点击下拉箭头*/selectImg.onclick = function () {console.log(selectItem.style.display);if(selectItem.style.display == 'none' || selectItem.style.display == ''){selectItem.style.display = 'block';}else{selectItem.style.display = 'none';}}content.onclick = function () {if(selectItem.style.display == 'none' || selectItem.style.display == ''){selectItem.style.display = 'block';}else{selectItem.style.display = 'none';}}var lis = selectItem.getElementsByTagName('li');for(var i = 0; i < lis.length; i++){lis[i].onclick = function () {console.log(this.innerHTML,this.getAttribute('data-value'));content.innerText = this.innerHTML;selectItem.style.display = 'none';}}</script></html>————————————————版权声明：本⽂为CSDN博主「zhang070514」的原创⽂章，遵循CC 4.0 BY-SA版权协议，转载请附上原⽂出处链接及本声明。

Select2.js下拉框使用小结

Select2.js下拉框使⽤⼩结⽤了这么久的Select2插件，也该写篇⽂章总结总结。

当初感觉Select2不是特别好⽤，但⼜找不到⽐它更好的下拉框插件。

在我的印象⾥Select2有2个版本，最新版本有⼀些新的特性，并且更新了⼀下⽅法参数，⽐最初版本要好看⼀些，本⽂针对新版本。

演⽰：由于博客系统的原因，所以只能演⽰简单的功能。

⼀.⽂件需要引⼊select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上最新版本的select2如果引⽤的jquery版本较低的话，某些功能⽆法正常使⽤。

⽐如：清除功能allowClear: true最新版本请使⽤<select></select>标签（对于本地化的数据你可以使⽤input，但ajax远程数据必须使⽤select）⼆.placeholderplaceholder占位提⽰⽂字，如果需要清楚功能，则必须设置placeholder。

三.加载本地数据select2默认的数据属性是id、text，新版本可以⾃定义，但还是⽤默认的⽐较好。

所以提供的json中最好转换为id、text形式，当然可以添加其他属性。

JS列表的下拉菜单组件（仿美化控件select）

JS列表的下拉菜单组件（仿美化控件select）今天是农历23 也是⼩年，在这祝福⼤家新年快乐！今天给⼤家分享的是：JS列表的下拉菜单组件，因为⽬前项⽬正好要⽤到这个，所以提前研究了下，看到KISSY也有这么⼀个组件，所以⾃⼰也封装了⼀个，KISSYKISSY组件名字叫 "⼀个解决⼤数据列表渲染效率的下拉菜单组件。

", 他对这个组件做了⼀次⼩优化。

(假如服务器返回10000条数据或者更多的话，那么我们前端⼀次性操作10000条数据的话很会影响性能，他们做的优化是：将数组拆分，根据浏览器本⾝的脚本执⾏能⼒进⾏分批渲染。

)，但是⽬前kissy demo上有加载2000条数据的demo，在⽕狐下还是会有卡住的现象，如果稍不好的话有可能会导致浏览器重启的可能。

⽽我今天做的demo和他们的功能类似，但是唯⼀不同点就是：假如返回10000条数据的话我没有对数组分批渲染，⽽是循环10000次把数据保存到⼀个变量⾥然后⼀次性动态加载进来，或许这么做和他们那种操作效率可能会低那么点(具体的我没有测试过)。

所以我今天的标题没有和他们那样⼀起叫。

所以今天的标题上："JS列表的下拉菜单组件". ⾸先要说明的是：⼀般的需求肯定是满⾜的，⼀个下拉框也不可能有那么多数据(⼀般情况下！)。

下⾯是我做的demo(JS列表的下拉菜单组件)。

JSFiddle地址如下：满⾜的基本功能是：⼀个基本下拉框，但是他与下拉框不同的是：他既可以输⼊精确匹配到某⼀项，也可以点击下拉，也⽀持键盘上下移操作。

但同时当我在输⼊框输⼊时候没有匹配到某⼀项时候，点击⽂档document 那么下拉框隐藏掉，input值为空。

同时且⽀持静态数据渲染⼜⽀持post请求渲染数据。

如上⾯配置：其中dataSource如果初始化为空数组的话，那么直接在内部发post请求渲染数据，否则的话也可以渲染静态数据：如下dataSource: [{text: "列表项1", value: 1},{text: "列表项2", value: 2},{text: "列表项3", value: 3},{text: "列表项4", value: 4},{text: "列表项5", value: 5},{text: "列表项6", value: 6},{text: "列表项7", value: 7},{text: "列表项8", value: 8},{text: "列表项9", value: 9},{text: "列表项10", value: 10},{text: "列表项11", value: 11}]如果dataSource 的长度⼤于0 的话那么他会按照静态数据渲染，不会发post请求否则的话 (如果数组为空，⽀持发post请求) 去渲染数据。

js获取下拉列表选中项的值和文本（select）以及获取单选按钮（radio）组的值和修改选中项

js获取下拉列表选中项的值和文本（select）以及获取单选按钮（radio）组的值和修改选中项js获取下拉列表选中项的值和文本(select)以及获取单选按钮(radio)组的值和修改选中项一、获取下拉列表选中项的值和文本(select)代码 select.htm 示例如下：====================================== =============================== ========1 2 3====================================== =============================== ========二、获取单选按钮(radio)组的值和修改选中项看到很多帖子里说js获取单选按钮(radio)组的值可以直接用document.getElementById("oper").value,虽然跟单选按钮组一样的下拉列表(也是列表项的数组)也是一个数组，用这种方式可以获到下拉列表的值,但是单选按钮组却获不到所选的值。

仔细研究了下，总结如下：与下拉列表不同，单选按钮须用this.form.oper或者document.getElementsByName('oper')方式获取该数组对象，document.getElementById('oper')不能获取该数组对象(select 可以)。

而且要获取值须通过一循环判断获取，不能直接用.value(select可以)。

而要改变单选按钮组的选中项，也须用循环判断改变各个单选按钮的value。

测试代码radio.html 如下:====================================== =============================== ======== 同意下发修改拒保上报alert('result:'+getRadio(this.form.oper))alert('result:'+getRadio(document.getElementById('oper'))) alert(this.form.oper.value)changeRadio(this.form.oper,"上报")同意下发修改拒保上报alert(this.form.slt.value)document.getElementById('slt')[2].innerText)。