/*------------------------------------------------------
*说明:select元素javascript常用操作
* 1.判断是否存在指定value的Item
* 2.加入一个Item
* 3.删除值为value的所有Item
* 4.删除某一个index的选项
* 5.更新第index项的value和text
* 6.设置select中指定text的第一个Item为选中
* 7.设置select中指定value的第一个Item为选中
* 8.得到当前选中项的value
* 9.得到当前选中项的index
* 10.得到当前选中项的text
* 11.清空所有选项
-------------------------------------------------------*/
//1.判断是否存在指定value的Item
function ExistValue(obj,value){
for(var i=0;i<obj.options.length;i++){
if(obj.options[i].value == value){
return true;
}
}
return false;
}
//2.加入一个Item
function AddItem(obj,text,value){
var varItem = new Option(text,value);
obj.options.add(varItem);
}
//3.删除值为value的所有Item
function RemoveItems(obj,value){
for(var i=0;i<obj.options.length;i++){
if(obj.options[i].value == value){
obj.remove(i);
}
}
}
//4.删除某一个index的选项
function RemoveItem(obj,index){
obj.remove(index);
}
//5.更新第index项的value和text
function UpdateItem(obj,index,value,text){
obj.options[index].value = value;
obj.options[index].text = text;
}
//6.设置select中指定text的第一个Item为选中
function SelectItemByText(obj,text){
var isExit = false;
for(var i=0;i<obj.options.length;i++){
if(obj.options[i].text == text){
obj.options[i].selected = true;
return true;
}
}
return false;
}
//7.设置select中指定value的第一个Item为选中
function SelectItemByValue(obj,value){
var isExit = false;
for(var i=0;i<obj.options.length;i++){
if(obj.options[i].value == value){
obj.options[i].selected = true;
return true;
}
}
return false;
}
//8.得到当前选中项的value,index,text
function GetValue(obj){
return obj.value;
}
//9.得到当前选中项的index
function GetIndex(obj){
return obj.selectedIndex;
}
//10.得到当前选中项的text
function GetText(obj){
return obj.options[obj.selectedIndex].text;
}
//11.清空所有选项
function Clear(obj){
obj.options.length = 0;
}
例如:
<html>
<head>
<script type="text/javascript">
function AddItem(obj,text,value){
var varItem = new Option(text,value);
obj.options.add(varItem);
}
</script>
</head>
<body>
<table>
<tr>
<td>
<select id="f" onClick="AddItem(f,44444,4)">
<option value="1">11111</option>
<option value="2">22222</option>
<option value="3">33333</option>
</select>
</td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
select元素javascript常用操作,实用!
这里熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮。 当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重新恢复它们。 当按下submit时关闭窗口...
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等) JavaScript 1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item...
6.4.html 获取select元素的值。 6.5.html JavaScript控制列表框与组合框。 6.6.html 多级下拉列表联动。 6.7.html 各种使用JavaScript获取复选框值的方法。 6.8.html JavaScript控制复选框。 ...
由于html的Select元素式样不更改,自已用Javascript写了DropDownList控件,支持分组.调用相当方便,不用更改原来的HTML结构.调用方法:DropDownList.bind(selectId).例如: --------------------------------- ...
选择列表selectlist是一个可自定义,可样式替换本机SELECT元素的jQuery插件。特征支持标准HTML选择标签支持键盘选项(UP,DOWN,ESC,ENTER) 支持自定义样式支持IE7 +,Firefox3 +,Chrome和Oprea用法链接到jQuery....
本文实例讲述了JavaScript实现向select下拉框中添加和删除元素的方法。分享给大家供大家参考,具体如下: 1、说明 a. 利用append()方法向下拉框中添加元素 b. 利用remove()方法移除下拉框中最后一个元素 2、实例源码...
在本文中,使用了 HTML select 元素来实现省市联动菜单。select 元素用于创建下拉菜单,option 元素用于创建菜单项。在本文中,使用了两个 select 元素:一个用于选择省份,另一个用于选择城市。 知识点 6: ...
选择同步 select-sync是一个插件,用于按选定或禁用的选项同步选择。...# app/assets/javascripts/application.js /* *= require select-sync */ 用法 $ ( "select[name='myArray[]']" ) . selectSync ( 'disableS
前端项目-optimal-select,为HTML元素获取高效、健壮的CSS选择器
选定的滑块值对应于html select元素中的选定选项。 用法 // bulletgraph with custom ranges & range labels $('select#metric2').bulletGraph({ width: 200, height: 20, ranges: ['0%', '20%', '70%', '100%']...
react-select-element实现标准的HTML <select />行为,而不使用任何<form />元素。 (当然,它可以组成实现它们的其他组件。) 您可以按原样使用它,也可以使用它extend自己的组件,修改其行为以适合您...
元素可以做的所有事情,都包装成一个轻量级,零依赖,可扩展的Vue组件。 Vue Select是功能丰富的选择/下拉/预输入组件。 它提供了适合大多数用例的默认模板,用于可过滤的选择下拉列表。 该组件设计为尽可能轻巧,...
1.ionic中的ion-select标签添加图片 ...还会学到javaScript的一些知识(如:获取Dom节点、获取html元素、自定义html元素) 4.内附有详细的代码介绍以及各种注意细节,可供各位喜欢研究ionic的学者学习参考
js获取下拉列表框元素的个数 代码如下:<!DOCTYPE html><html><head>[removed]function getLength(){alert(document.getElementById(“mySelect”).length);//元素个数}[removed]</head&...
jQuery-selectList 用于替换标准 HTML(多个)选择元素的 jQuery 插件。
本文实例讲述了javascript与jquery动态创建html元素的方法。分享给大家供大家参考,具体如下: 1.javascript创建元素 创建select var select = document.createElement("select"); elect.options[0] = new Option(...
英文 带有父母/子女概念的html select元素的功能。 它将根据操作更改其内容。 作者: PT 选择带有父母和孩子的html功能,并根据操作更改其内容以及孩子的内容。 创作者:
项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1、首先定义全局js变量 var strVoucherGroupSelect =””; 2、在js中写好获取服务端...