jquery与js添加子元素
例如在select中添加option
JQuery做法:
<select id="myselect" name="myselect">
</select>
$("#myselect").append('<option value="-1">请选择</option>');
js的做法:@参考文章
关于 select 的添加 option 应该注意的问题。
标准的做法如上
也就是说，标准的做法是 s.options.add();
但是如果你一定要用 s.appendChild(option);
注意了，你只能用如下两种方式之一:
1.
s.appendChild(option);
option.text = 'hello world';
option.value =3;
也就是，一定要先添加到 select 中，然后再为 option 赋值。否则在 FF 下是显示正常的，但是在 IE6 中显示的是空白
2. 如果你要讲 option.text 和 option.value 的赋值放在前面，那么请用 option.innerHTML 而不是 option.text
如下:
option.innerHTML = 'hello world';
opion.value = 3;
option.appendChild(option);
3 第三种解决方式。
var op=document.createElement("option"); // 新建OPTION (op)
op.setAttribute("value",0); // 设置OPTION的 VALUE
op.appendChild(document.createTextNode("请选择---")); // 设置OPTION的 TEXT
select.appendChild(op); // 为SELECT 新建一 OPTION(op)
select.options.length=0; //把select对象的所有option清除掉
select.options.remove(i); //把select对象的第i个option清除掉
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS动态添加删除option</title>
<script>
//动态删除select中的所有options：
function delAllOptions(){
document.getElementById("user_dm").options.length=0;
}
//动态删除select中的某一项option：
function delOneOption(indx){
document.getElementById("user_dm").options.remove(indx);
}
// 动态添加select中的项option:
function addOneOption(){
//document.getElementById("user_dm").options.add(new Option(2,"mytest"));
var selectObj=document.getElementById("user_dm");
alert(selectObj.length);
selectObj.options[selectObj.length] = new Option("mytest", "2");
}
</script>
</head>
<body>
<select id="user_dm" name="user_dm">
<option value="0" selecte>==请选择人员==</option>
<option value="1">test</option>
</select><br>
<input type="button" onClick="addOneOption()" value="添加">
<input type="button" onClick="delOneOption(1)" value="删除第一个">
<input type="button" onClick="delAllOptions()" value="清空">
</body>
</html>
===============================================================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Js动态添加与删除Option对象</TITLE>
<script language="JavaScript">
// 添加选项
function addOption(pos){
var objSelect=document.getElementById("mySelect");
// 取得字段值
//var strName = document.myForm.myOptionName.value;
// var strValue = document.myForm.myOptionValue.value;
// 建立Option对象
var objOption = new Option("李高灰","bbbbbbbbb");
if (pos == -1&& pos > objSelect.options.length))
objSelect.options[objSelect.options.length] = objOption;
else
objSelect.add(objOption, pos);
}
// 删除
function deleteOption(type){
var objSelect=document.getElementById("mySelect");
if (type == true)
objSelect.options[objSelect.selectedIndex] = null;
else
objSelect.remove(objSelect.selectedIndex);
}
// 显示选项信息
function showOption(){
var objSelect=document.getElementById("mySelect");
var name = objSelect.options[objSelect.selectedIndex].text;
var value = objSelect.options[objSelect.selectedIndex].value;
alert(name + " = " + value);
}
//动态删除select中的所有options：
function clearAllOptions(){
var objSelect=document.getElementById("mySelect");
objSelect.options.length=0;
}
</script>
jquery与js添加子元素的更多相关文章
- [转]jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery append 动态添加的元素绑定事件on
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- 用jquery添加新元素很容易，面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢？
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- WEB前端技巧之JQuery为动态添加的元素绑定事件.md
jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...
- jquery-创建元素和添加子元素
一.创建新元素 1.使用$函数创建新元素 var $newElement=$('<div><p>段落</p></div>');//创建元素,返回jQue ...
- 【WPF】用代码给集合（Collection）容器动态添加子元素（Item）
需求:如何向 TabControl 中添加选项卡项. 问题:做的TabControl分页栏想要通过代码来控制添加的子元素.同理可以将解决思路拓展到用于其他的集合控件添加子元素的问题. 在布局文件She ...
- jQuery获取动态添加的元素，live和on的区别
今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在 ...
- js添加删除元素
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
随机推荐
- 关于“System.Data.OleDb.OleDbException，外部数据库驱动程序 (1) 中的意外错误。”的解决方案
网站之前运行一直很正常,但有一次用户在导入格式为xls的excel文件,发生了错误,跟踪错误后抛出如下的异常: 错误提示: 未处理System.Data.OleDb.OleDbException HR ...
- java String 不可变
关于String不可变的问题也看了很多,最近看了一篇讲的非常好的文章,总结如下 所谓的不可变,并非真的不可变String s = "123"; s = "456" ...
- 推荐一个比HtmlWebpackPlugin更灵活的插件
插件:html-res-webpack-plugin https://github.com/lcxfs1991/html-res-webpack-plugin/blob/v3/README_ZH.md ...
- VFS四大对象之三 struct dentry
继上一篇文章介绍了inode结构体:继续介绍目录项dentry: http://www.cnblogs.com/linhaostudy/p/7427794.html 三.dentry结构体 目录项:目 ...
- ubuntu16中遇到libgstreamer-0.10.so.0缺失解决方案
1. error while loading shared libraries: libgstreamer-0.10.so.0: cannot open shared object file: No ...
- mysql中不等于过滤null的问题
在写SQL 条件语句是经常用到 不等于‘!=’的筛选条件,此时要注意此条件会将字段为null的数据也当做满足不等于的条件而将数据筛选掉. 例:表A A1 B1 1 0 2 1 3 NULL 用 se ...
- 声音变调算法PitchShift(模拟汤姆猫) 附完整C++算法实现代码
上周看到一个变调算法,挺有意思的,原本计划尝试用来润色TTS合成效果的. 实测感觉还需要进一步改进,待有空再思考改进方案. 算法细节原文,移步链接: http://blogs.zynaptiq.com ...
- Codefoces 723B Text Document Analysis
B. Text Document Analysis time limit per test:1 second memory limit per test:256 megabytes input:sta ...
- bzoj usaco 金组水题题解（1）
UPD:我真不是想骗访问量TAT..一开始没注意总长度写着写着网页崩了王仓(其实中午的时候就时常开始卡了= =)....损失了2h(幸好长一点的都单独开了一篇)....吓得赶紧分成两坨....TAT. ...
- 二叉排序树BST+求树深度算法
#include "stdio.h" #include "malloc.h" typedef struct node { int key; struct nod ...