jquery与js添加子元素

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>

转载于:https://www.cnblogs.com/yanan7890/p/6607336.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108605.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 微机原理与接口技术实验报告心得_微型计算机原理与接口技术第二版

    微机原理与接口技术实验报告心得_微型计算机原理与接口技术第二版微机原理与接口技术实验总结寒黎实验内容以及设计思路1、=1\*GB3①试编写一程序,比较两个字符串STRING1、STRING2 所含字符是否相同,若相同输出“MATCH”,若不相同输出“NOMATCH”。设计思路:定义一个数据段,在数据段中定义两个字符串作为STRING1、STRING2以及几个用于输入提示的和输出所需内容的字符串,定义一个堆栈段用于存放,定义代码段。关键步骤以…

  • 百度分享解决https格式

    百度分享解决https格式现在的百度分享都是不支持https格式的,所以碰到https格式的就会没有效果,想要解决这个问题也很简单,只需要两步:1.https://github.com/hrwhisper/baiduShare在此网址里面下载一个static包,主要要放到项目里的根目录下,我这里用的是Yii框架,是把static包直接放到web下面了2.src=’http://bdimg.share.baidu.com…

  • 验证二叉搜索树 leetcode_二叉树 面试题

    验证二叉搜索树 leetcode_二叉树 面试题重写equal()时为什么也得重写hashCode()之深度解读equal方法与hashCode方法渊源 原创  2016年05月08日 23:14:19 标签:java equal方法重写 /java /重写equals方法和hashCode方 10077 转载请注明出处: http://blog.csdn.net/javazejian/art…

  • 将String转换成Int数组-Java「建议收藏」

    今天贴出来一个编程小技巧,利用substring或charAt将字符转换为int数组。方法一:publicclassParseString{publicstaticint[]stringToInts(Strings){int[]n=newint[s.length()];for(inti=0;i

  • Python多线程与多线程中join()的用法

    Python多线程与多线程中join()的用法Python多线程与多进程中join()方法的效果是相同的。下面仅以多线程为例:首先需要明确几个概念:知识点一:当一个进程启动之后,会默认产生一个主线程,因为线程是程序执行流的最小单元,当设置多

  • ExecuteNonQuery()返回值问题[通俗易懂]

    ExecuteNonQuery()返回值问题[通俗易懂]1.使用update,insert,delete等对数据库中表行进行操作的时候,返回值为所操作的行数(若该条语句未作用在任何一行,则返回0)2.使用alter添加表空间数据文件,create创建表,drop删除表等操作时返回值为03.数据库连接字符串http://blog.csdn.net/cddchina/article/details/46046

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号