- 浏览: 82991 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
wzwahl36:
文章很赞!http://www.atool.org/img2b ...
Base64编码的图片在网页中的显示问题的解决 -
mllongze:
haidage 写道小伙,你头像真磕碜。那是我最帅的一张
JAVA实现约瑟夫环 -
haidage:
小伙,你头像真磕碜。
JAVA实现约瑟夫环 -
mllongze:
angelgreen 写道恩 谢谢啊 rpm安装 不用 呵呵 ...
linux下rpm安装时遇到的问题 -
mllongze:
haidage 写道你要干嘛 咋地 没看到嘛 常用的计算符号 ...
常用特殊符号
(转载....)
注意:Option中的O是要大写的,不然语法报错
1.动态创建select
function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
2.添加选项option
function addOption(){
//根据id查找对象,
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}
3.删除所有选项option
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
4.删除一个选项option
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}
5.获得选项option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;
6.获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;
7.修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
8.删除select
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
<!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元素
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(){ // 初始
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;
}
整个实例的完整代码如下: <!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">
<!--
// Author: i@lxl.cn
// Modify: i@cnlei.com
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>
var echkbox=document.createElement("input");
echkbox.setAttribute("type","checkbox");
echkbox.setAttribute("id","inputid");
echkbox.setAttribute("name","inputname");
echkbox.setAttribute("value","inputvalue");
echkbox.setAttribute("checked","checked");
var addhere=document.getElementById("someElementId");
addhere.appendChild(echkbox);
alert(document.getElementById("inputid").checked);
ie7显示出来的checkbox居然是未选中的但是alert出来的却是true,而FF一切正常
后来查了半天资料说是ie显示的时候只对状态改变比较敏感
改成
var echkbox=document.createElement("input");
echkbox.setAttribute("type","checkbox");
echkbox.setAttribute("id","inputid");
echkbox.setAttribute("name","inputname");
echkbox.setAttribute("value","inputvalue");
var addhere=document.getElementById("someElementId");
addhere.appendChild(echkbox);
echkbox.setAttribute("checked","checked");
alert(document.getElementById("inputid").checked);
一切ok
radio同样是这种情况。
注意:Option中的O是要大写的,不然语法报错
1.动态创建select
function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
2.添加选项option
function addOption(){
//根据id查找对象,
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}
3.删除所有选项option
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
4.删除一个选项option
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}
5.获得选项option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;
6.获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;
7.修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
8.删除select
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
<!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元素
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(){ // 初始
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;
}
整个实例的完整代码如下: <!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">
<!--
// Author: i@lxl.cn
// Modify: i@cnlei.com
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>
var echkbox=document.createElement("input");
echkbox.setAttribute("type","checkbox");
echkbox.setAttribute("id","inputid");
echkbox.setAttribute("name","inputname");
echkbox.setAttribute("value","inputvalue");
echkbox.setAttribute("checked","checked");
var addhere=document.getElementById("someElementId");
addhere.appendChild(echkbox);
alert(document.getElementById("inputid").checked);
ie7显示出来的checkbox居然是未选中的但是alert出来的却是true,而FF一切正常
后来查了半天资料说是ie显示的时候只对状态改变比较敏感
改成
var echkbox=document.createElement("input");
echkbox.setAttribute("type","checkbox");
echkbox.setAttribute("id","inputid");
echkbox.setAttribute("name","inputname");
echkbox.setAttribute("value","inputvalue");
var addhere=document.getElementById("someElementId");
addhere.appendChild(echkbox);
echkbox.setAttribute("checked","checked");
alert(document.getElementById("inputid").checked);
一切ok
radio同样是这种情况。
发表评论
-
Cross Frame 与不同域进行交互
2011-11-04 11:25 2159为何要用不同网域的 Iframe? 通常较具规模的网站, ... -
数据库连接池技术中dbcp、c3p0、jndi
2011-10-21 16:54 1221不管通过何种持久化技术,都必须通过数据连接访问数据库,在Spr ... -
JAVA实现约瑟夫环
2011-10-12 11:59 929//实现约瑟夫环 public class Josephus ... -
java.lang.NoClassDefFoundError: net/sf/ezmorph/Morpher
2011-09-22 12:58 1006使用JSON,在SERVLET或者STRUTS的ACTION中 ... -
六条比较有用的MySQL的SQL语句
2011-09-22 12:08 781本文给大家介绍六条比较有用的MySQL的SQL语句,可能很多人 ... -
linux下rpm安装时遇到的问题
2011-09-22 12:07 1183在Linux下安装rpm包时经常会遇到下面这个问题: ... -
JS 常用经典小技巧==(不断更新)
2011-09-22 12:06 947一、1. X.replace(/\"/g," ... -
ajax提交特殊字符编码转换问题.ishexdigit问题-解决方案
2011-09-22 12:03 2032今天测试密码输入了一串特殊字符后后台出来如下错误: 2010 ... -
JS逻辑运算符&&与||的妙用
2011-09-22 12:01 4706/* 文章写的不错 就此分享 */ &&中第一 ... -
JavaScript学习笔记(一)---Curry化技术/几个页面加载的区别
2011-04-28 17:36 2599Curry化技术是一种通过 ... -
不能使用Hibernate Reverse Engineering生成实体类的原因(转)
2011-04-28 16:00 1177/*取自http://tonysmith.iteye.com/ ... -
web.xml解析
2011-04-28 15:35 1488【1】.web.xml头文件 <?xml version ... -
Myeclipse6.5反编译工具----jadclipse
2011-04-25 16:17 1216一。将解压后的jad.exe文件复制到java\jdk\bin ... -
Hibernate Criteria 学习
2011-04-21 11:04 645/*此文章网上摘录 仅供自己学习使用*/ 设计上可以灵活的 ... -
Base64编码的图片在网页中的显示问题的解决
2011-03-21 17:17 84151.为什么要用到BASE64编码的图片信息 Base6 ... -
JQuery的Cookies插件
2011-03-18 16:46 1803在使用jquery.cookies.2.2.0.js的插件时是 ... -
Hibernate 映射文件在不联网的时候 处理DTD方法
2011-03-18 16:16 1293这个问题应该是在做hibernate项目中遇到的比较常见的问题 ... -
Hibernate继承分页BUG解决方法之一
2011-03-09 16:08 1035(转载) 今天遇到了一个大问题,hibernate的继承分页b ... -
javascript cookies 存、取、删除实例
2011-03-09 14:51 864(转载 javascript cookies技术 。。。。 ... -
object和embed使用及举例(转载)
2011-03-09 11:21 1150今天看到公司代码里有j ...
相关推荐
在JavaScript中,我们可以通过DOM操作来创建和添加`option`元素。首先,我们需要一个数组来存储下拉列表的数据,这些数据可以是字符串,也可以是对象,取决于我们的具体需求。 以下是一个基本的步骤: 1. **准备...
总结以上内容,HTML DOM中的select, option级联下拉列表的学习涉及到DOM查找、表单验证、创建节点等基础知识。熟练掌握这些知识对于提升前端开发能力至关重要。对于任何一个初学者来说,都需要通过大量的练习和应用...
在这个例子中,我们定义了两个函数:`createOption`用于创建Option元素,`addOption`则用于将创建的Option添加到指定的Select中。我们还创建了一个数组`optionsData`来模拟动态获取的数据,然后遍历这个数组,为每个...
`<select>` 标签用于创建一个下拉列表。使用 jQuery 获取或设置 `<select>` 元素的值非常方便: 1. **获取选中的值**: ```javascript var selectedValue = $('#select_id').val(); console.log(selectedValue);...
使用jQuery可以方便地创建并添加新的`<option>`元素到下拉列表中。 2. **清空下拉列表的所有选项**: ```javascript $("#sel").empty(); ``` 使用`.empty()`方法可以清空下拉列表的所有选项。 以上就是从给定...
接下来,要将这个新创建的`<option>`元素添加到`<select>`元素中,我们需要找到目标`<select>`元素,这通常通过其`id`属性完成,例如:`var selectElement = document.getElementById('selectId')`。之后,使用`....
在网页开发中,`<select>`元素用于创建下拉列表,而`<option>`标签则定义了下拉列表中的选项。有时候,我们可能需要在页面加载时预设一个选项为默认选中状态,或者根据用户操作动态改变选中状态。在JavaScript中,这...
HTML DOM DOM 首页 DOM 简介 DOM 节点 DOM 节点树 DOM 节点访问 DOM 节点信息 DOM How To DOM 参考 ...DOM Option DOM Select DOM Style DOM Table DOM TableCell DOM TableRow DOM Textarea
jQuery作为一种流行的JavaScript库,极大地简化了DOM操作的过程,使得处理`<select>`元素变得简单高效。本文档汇总了一系列关于如何使用jQuery来操作`<select>`元素及其`<option>`子元素的方法,旨在为前端开发者...
`<select>`元素用于创建下拉列表,而`<option>`元素则表示下拉列表中的可选项。在HTML中,多个`<option>`标签可以嵌套在`<select>`中,用户可以在这些选项中进行选择。 在jQuery中,我们可以方便地通过类选择器、ID...
在JavaScript编程中,`select`元素和`option`标签是创建下拉列表的重要部分。`select`用于定义一个选择框,而`option`则用于在选择框中添加可选项。在网页交互中,用户通常会使用这样的下拉列表来从预设的选项中做出...
首先,要更改select内的option属性,需要获取select元素的DOM引用。这通常通过document.getElementById()方法来实现,该方法接受一个ID字符串作为参数,返回匹配的DOM元素。例如,在文档中有一个select元素,其id为'...
- 方法一:通过id选择器获取select标签,然后使用":selected"伪类选择器找到当前选中的option,接着使用.text()方法获取选中的option的文本内容。代码为`$("#sel option:selected").text();` - 方法二:通过id选择...
2. 使用循环结构,通过`new Option(text, value)`创建option元素,并利用`_select.options.add(_option)`方法将其添加到select元素中。 3. 设置onchange事件处理函数,捕捉用户选中值改变的动作。 4. 最后,将select...
- 创建一个`<select>`元素,并为其添加多个`<option>`元素,每个`<option>`的`value`属性值对应新闻标题。 - 在页面上创建一个`<div>`元素,用作显示新闻内容的容器。 2. **CSS样式设置**: - 通过CSS将`<div>`...
js函数方法: 代码如下: [removed]... try { opts = document.getElementById(selectId).getElementsByTagName(‘option’); for (var i in opts) { if (opts[i].defaultSelected) { dom = opts[i]; break; } } } catch
对于纯JavaScript的实现,我们可以创建一个`<select>`元素,并为它添加`onchange`事件监听器。当用户改变选中的`<option>`时,`gradeChange`函数会被调用。在该函数中,我们通过`getElementById`获取`<select>`元素...
`<select>` 元素用于创建下拉菜单,而`<option>` 是其中的各个选项。例如: ```html <select id="mySelect"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">...