`
jsx112
  • 浏览: 315806 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

js操作select

javascriptfirefoxhtmloperaie 
阅读更多

 

写道
注意:Option中的O是要大写的，不然语法报错

1.动态创建select

Javascript代码
function createSelect(){

Select = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}


2.添加选项option

Javascript代码
function addOption(){

//根据id查找对象，
var obj=document.getElementById('mySelect');

//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}


----------------------------------------------------------------
Option里面的四个参数分别的意思

new Option (text,value,defaultselected,selected)
new Option (文本,值,默认选中的选项,选中的选项)

看测试结果就懂了
<select id="s1"></select>

<script>
var op = new Option("显示文本1","值1",false,false);
s1.options.add(op);
op = new Option("显示文本2","值2",false,true);
s1.options.add(op);
</script>
-----------------------------------------------------------------

3.删除所有选项option

Javascript代码
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;

}


4.删除一个选项option

Javascript代码
function removeOne(){
var obj=document.getElementById('mySelect');

//index,要删除选项的序号，这里取当前选中选项的序号

var index=obj.selectedIndex;
obj.options.remove(index);
}


5.获得选项option的值

Javascript代码
var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].value;


6.获得选项option的文本

Javascript代码
var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].text;


7.修改选项option

Javascript代码
var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index]=new Option("新文本","新值");


8.删除select

Javascript代码
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}




整个实例的完整代码如下：

Javascript代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<head>
<script language=JavaScript>
function $(id)
{
return document.getElementById(id)
}
function show()
{
var selectObj=$("area")
var myOption=document.createElement("option")
myOption.setAttribute("value","10")
myOption.appendChild(document.createTextNode("上海"))
var myOption1=document.createElement("option")
myOption1.setAttribute("value","100")
myOption1.appendChild(document.createTextNode("南京"))
selectObj.appendChild(myOption)
selectObj.appendChild(myOption1)
}
function choice()
{
var index=$("area").selectedIndex;
var val=$("area").options[index].getAttribute("value")
if(val==10)
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var sh=document.createElement("select")
sh.add(new Option("浦东新区","101"))
sh.add(new Option("黄浦区","102"))
sh.add(new Option("徐汇区","103"))
sh.add(new Option("普陀区","104"))
$("context").appendChild(sh)
}
if(val==100)
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var nj=document.createElement("select")
nj.add(new Option("玄武区","201"))
nj.add(new Option("白下区","202"))
nj.add(new Option("下关区","203"))
nj.add(new Option("栖霞区","204"))
$("context").appendChild(nj)
}
}
function calc()
{
var x=$("context").childNodes.length-1;
alert(x)
}
function remove()
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
}
</script>
<body>
<div id="context">
<select id="area" onchange="choice()">
</select>
</div>
<input type=button value="显示" onclick="show()">
<input type=button value="计算结点" onclick="calc()">
<input type=button value="删除" onclick="remove()">
</body>
</html>




改进版：在select中添加、修改、删除option元素

Javascript代码
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var word = document.createElement("OPTION");
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // 增加
var word = document.createElement("OPTION");
word.text = f.word.value;
f.keywords.add(word);
}

但上述 add() 方法只在IE下有效，为兼容FF和Opera，对上述代码进行了一下改进，改动后代码如下： function watch_ini(){ // 初始

Javascript代码
for(var i=0; i<arguments.length; i++){
var oOption=new Option(arguments[i],arguments[i]);
document.getElementById("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}



整个实例的完整代码如下：

Javascript代码
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>javascript select options text value</title>
<meta name="keywords" content="javascript select options text value add modify delete set">
<meta name="description" content="javascript select options text value add modify delete set">
<script language="javascript">
<!--
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var oOption=new Option(arguments[i],arguments[i]);
document.getElementById("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}
function watch_sel(f){ // 编辑
f.word.value = f.keywords[f.keywords.selectedIndex].text;
}
function watch_mod(f){ // 修改
f.keywords[f.keywords.selectedIndex].text = f.word.value;
}
function watch_del(f){ // 删除
f.keywords.remove(f.keywords.selectedIndex);
}
function watch_set(f){ // 保存
var set = "";
for(var i=0; i<f.keywords.length; i++){
set += f.keywords[i].text + ";";
}
confirm(set);
}
//-->
</script>
</head>
<body>
<form name="watch" method="post" action="">
<select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>
<script language="javascript">
<!--
watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词
//-->
</script>
<input type="text" name="word" /><br />
<input type="button" value="增加" onclick="watch_add(this.form);" />
<input type="button" value="修改" onclick="watch_mod(this.form);" />
<input type="button" value="删除" onclick="watch_del(this.form);" />
<input type="button" value="保存" onclick="watch_set(this.form);" />
</form>
</body>
</html>

 

分享到：
| The error is weblogic.descriptor.Descrip ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js 操作select和option

    &lt;title&gt;JS 操作 Select 和 Option &lt;script language="JavaScript"&gt; function $(id) { return document.getElementById(id); } function show() { var selectObj = $("area"); var myOption = document....

    Javascript 操作select控件大全

    Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等

    js操作select控件大全

    js 操作 select 控件大全是 JavaScript 中对 select 控件的各种操作的集合，包括新增、修改、删除、选中、清空、判断存在等多种操作。下面将对这些操作进行详细的介绍和讲解。 一、 判断 select 选项中是否存在 ...

    Js操作Select大全(取值、设置选中等等)

    ### Js操作Select大全知识点详解 #### 一、概述 JavaScript（简称JS）是网页开发中不可或缺的一部分，尤其在处理用户界面交互方面具有重要作用。本文档将详细介绍如何利用原生JavaScript和jQuery来操作`&lt;select&gt;`...

    JavaScript操作select大全

    ### JavaScript操作select大全 在网页开发中，`&lt;select&gt;`元素是用于创建下拉列表的常用HTML标签之一。本文档提供了详细的JavaScript操作`&lt;select&gt;`元素的方法，包括判断选项是否被选中、增删改选项及其属性等实用...

    javascript操作Select标记中options集合

    这篇博客“javascript操作Select标记中options集合”深入探讨了如何利用JavaScript动态地管理和操作这些选项。以下是关于这个主题的一些关键知识点： 1. **DOM操作**：在JavaScript中，我们可以使用DOM（Document ...

    Javascript 操作select下拉框

    ### JavaScript 操作 Select 下拉框的关键知识点 在 Web 开发中，`&lt;select&gt;` 元素用于创建下拉列表（或选择框）。这些选择框在用户界面中非常常见，可以用来收集用户输入的信息，比如让用户从一系列选项中选择一个...

    JavaScript操作select&&table

    ### JavaScript操作select&&table #### 一、JavaScript操作Select元素 在Web开发中，`&lt;select&gt;`元素用于创建下拉列表。通过JavaScript可以对这些下拉列表进行动态操作，包括添加选项、删除选项、获取选中的值等。...

    Javascript操作Select和Option

    Javascript操作Select和Option 一个网页 挺全的

    js操作select大全 转

    根据给定的信息，本文将对JavaScript操作`&lt;select&gt;`元素的方法进行详细介绍，这些方法涵盖了创建、选择、删除选项等操作。 ### 1. 检查`&lt;select&gt;`元素是否存在值为`paraValue`的项 ```javascript function ...

    js操作select相关方法

    以上代码展示了JavaScript操作`select`元素的一些常见方法。首先，`jsSelectIsExitItem`函数用于检查`select`中是否存在指定`value`的选项。如果存在，它将返回`true`，否则返回`false`。接着，`jsAddItemToSelect`...

    html最全的js javascript操作select 下拉框

    根据给定的文件标题、描述、标签以及部分内容，本文将深入解析HTML中使用JavaScript操作`&lt;select&gt;`下拉框的全面方法。`&lt;select&gt;`元素是网页表单中用于创建下拉列表的关键部分，而通过JavaScript，我们可以动态地添加...

    javascript 操作select下拉列表框的一点小经验.docx

    ### JavaScript操作Select下拉列表框的关键技术点 #### 一、背景与需求分析 在Web应用开发中，经常需要处理用户界面的各种交互行为。本文档介绍了一种利用JavaScript操作Select下拉列表框的方法，旨在满足特定场景...

    Js操作Select大全.doc

    以上是JavaScript操作`&lt;select&gt;`标签的一些基本方法。在实际开发中，这些功能可能会作为更复杂交互的基础，例如动态加载数据、响应用户事件等。了解并熟练掌握这些操作，对于提升网页的交互性和用户体验至关重要。

    javascript操作select元素实例分析

    JavaScript操作select元素是一个非常实用的前端技能，它可以通过用户与下拉菜单的交互来改变页面上的内容或行为，从而提升用户体验。下面将详细介绍如何使用JavaScript来操作select元素，并通过实例分析来说明其具体...

    Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）

    在JavaScript中操作`&lt;select&gt;`控件是网页开发中常见的需求，涉及到增、删、查、改等操作。本文将详细介绍如何使用JavaScript对`&lt;select&gt;`控件进行各种操作，包括新增选项、修改选项、删除选项、选中特定选项、清空...

Magicbox
Global site tag (gtag.js) - Google Analytics