javascript操作select参考代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript操作select参考代码

Javascript: 在Z-Blog中运行代码[html][/html]（纯JS版）; 统一接口：为FireFox添加IE的方法和属性的js代码; 网页自动刷新，不产生嗒嗒声的一个解决方法; 驱动事件的addEvent.js代码; [原创]提供复制本站内容时出现,该文章转自IT学习网等字样的js代码; CSDN轮换广告图片轮换效果; 一段多浏览器的"复制到剪贴板"javascript代码; Javascript中的常见排序算法; JS Common 2 之比较常用到的函数; 非正则实现的只能输入汉字的输入框; CSDN上快速结贴的方法，JS实现; js eval木马代码,以后再分析吧; 屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键的javascript代码; 一个不错的可以检测多中浏览器的函数和其它功能; 状态栏显示欢迎信息的脚本特效; 关于文本限制字数的js代码; 在你的网页中嵌入外部网页的方法; 在IE中调用javascript打开Excel的代码(downmoon原作); javascript实现动态增加删除表格行(兼容IE/FF); javascript中获取选中对象的类型

No. « ‹ 58 59 60 61 › »

技术文章搜索

关键字

Javascript 中的 javascript操作select参考代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 292 ::

收藏到网摘: n/a

用javascript和css模拟select的脚本 javascript String 的扩展方法集合

用js控制select的方法，大家可以参考下 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;
上面的是从网上搜集的，现在看看根据上面的内容做的

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript select结合_软晨学习网_www.ruanchen.com</title>
<script language="javascript" type="text/javascript">
function vtOption(){
var s1=document.getElementById("select1");
var sV=s1.options[s1.selectedIndex].value;
var sT=s1.options[s1.selectedIndex].text;
alert(sV+"\n"+sT);
}
function addOption1(){
var s1=document.getElementById("select1");
var newOp1=new Option;
newOp1.value="3";
newOp1.text="这是3";
var newOp2=new Option;
newOp2.value="4";
newOp2.text="这是4";
s1.add(newOp1);
s1.add(newOp2);
}
function addOption2(){
var s1=document.getElementById("select1");
for(var i=3;i<5;i++){
var newOp1=new Option("这是"+i,i);
//var newOp1=new Option;
//newOp1.value=i;
//newOp1.text="这是"+i;
s1.add(newOp1);
}
}
function addOption3(){
var s1=document.getElementById("select1");
s1.options.length=0;//清除以前的选项
for(var i=3;i<7;i++){
var newOp1=new Option("这是"+i,i);
//var newOp1=new Option;
//newOp1.value=i;
//newOp1.text="这是"+i;
s1.add(newOp1);
}
}
function remOption(){
var s1=document.getElementById("select1");
for(var i=s1.options.length;i>=0;i--){
s1.options.remove(i);
}
}
function remOptionSelected(){
var s1=document.getElementById("select1");
var i=s1.selectedIndex;
//alert(i);
s1.options.remove(i);
}
</script>
</head>
<body>
<select name="select" id="select1">
<option value="1">这是1</option>
<option value="2">这是2</option>
</select>
<a href="javascript:vtOption()">取值</a> <a href="javascript:addOption1()">增加1</a> <a href="javascript:addOption2()">增加2</a> <a href="javascript:addOption3()">增加3</a> <a href="javascript:remOption()">删除选项</a> <a href="javascript:remOptionSelected()">删除选取选项</a>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

用javascript和css模拟select的脚本 javascript String 的扩展方法集合

Javascript 中的 javascript操作select参考代码

评论 (0) All