例如在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添加子元素的更多相关文章

  1. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  2. jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  3. jquery append 动态添加的元素绑定事件on

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  4. 用jquery添加新元素很容易，面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢？

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  5. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  6. jquery-创建元素和添加子元素

    一.创建新元素 1.使用$函数创建新元素 var $newElement=$('<div><p>段落</p></div>');//创建元素,返回jQue ...

  7. 【WPF】用代码给集合（Collection）容器动态添加子元素（Item）

    需求:如何向 TabControl 中添加选项卡项. 问题:做的TabControl分页栏想要通过代码来控制添加的子元素.同理可以将解决思路拓展到用于其他的集合控件添加子元素的问题. 在布局文件She ...

  8. jQuery获取动态添加的元素，live和on的区别

    今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在 ...

  9. js添加删除元素

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

随机推荐

  1. java中碰到无法解决的问题：无法访问类的getter访问器

    大牛们来看看,俺这是咋了?因博问不让发图,发到这里求助: 以上两个方法都是从mysql中select数据,为嘛第二个出现辣鸡报错? 请注意: reslist.size() = 289 第二种方法已经获 ...

  2. 扒一扒offsetleft，srollleft，pagex，clientx，postion().left等精确位置的获取与理解

    先上个pc端和手机端的图:   说明:上面的属性,都是in这个div的属性值.我是点击的in这个div的左上角,所以pageX.pageY是40. HTML: <div class=" ...

  3. IdentityServer（13）- 添加JavaScript客户端

    这个快速入门将展示如何构建一个JavaScript客户端应用程序. 用户将登录到IdentityServer,使用IdentityServer发出的访问令牌调用Web API,并注销IdentityS ...

  4. HTML基础知识（表格、表单）

    6.表格 l  概念:表格一定具有行和列 注:使用<thead><tbody><tfoot>,使浏览器能独立于表格表头和表格页脚的表格主体滚动.当包含多个页面的表格 ...

  5. 从头开始基于Maven搭建SpringMVC+Mybatis项目(1)

    技术发展日新月异,许多曾经拥有霸主地位的流行技术短短几年间已被新兴技术所取代. 在Java的世界中,框架之争可能比语言本身的改变更让人关注.近几年,SpringMVC凭借简单轻便.开发效率高.与spr ...

  6. hdu_1015(dfs)

    题意:根据给出的计算公式,给一个n和一个字符集,问能不能在字符串集中找到不重复的五个字符,让其计算结果等于给定的n,如果有多个解输出字典序最大的一个 题解:dfs直接上代码了 code: #inclu ...

  7. android仿微信红包动画、Kotlin综合应用、Xposed模块、炫酷下拉视觉、UC浏览器滑动动画等源码

    Android精选源码 仿微信打开红包旋转动画 使用Kotlin编写的Android应用,内容你想象不到 Android手机上的免Root Android系统日志Viewer 一个能让微信 Mater ...

  8. SPI、I2C、UART（转）

    UART与USART(转) UART需要固定的波特率,就是说两位数据的间隔要相等. UART总线是异步串口,一般由波特率产生器(产生的波特率等于传输波特率的16倍).UART接收器.UART发送器组成 ...

  9. sql server2008数据库复制实现数据同步常见问题

    sql server2008数据库复制实现数据同步常见问题 在原作者基础上追加 sql server2008数据库复制实现数据同步常见问题 23.发布 'xx' 的并发快照不可用,因为该快照尚未完全生 ...

  10. 为什么ios手机安装好fiddler证书/charles证书还是抓不到https请求？

    为什么ios手机安装好fiddler证书/charles证书还是抓不到https请求? 最近有不少人有此困惑, 因为你的ios系统应该是10.0以上的系统, 在手机系统设置---关于手机----证书信 ...