表单中单选框添加选项和移除选项


Posted in Javascript onJuly 04, 2016

selection添加option并放在最后一项

html代码:

<form>
<select name="location" id="location">
<option value="beijing1">beijing</option>
<option value="shanghai1">shanghai</option>
<option value="chengdu1">chengdu</option>
<option value="changsha1">changsha</option>
</select>
</form>

js代码:

var select=document.forms[0].elements['location'];

第一种方法:添加单选选项

var newOption=document.createElement('option');
var newText=document.createTextNode('guangzhou');
newOption.appendChild(newText);
newOption.setAttribute('value','guangzhou');
select.appendChild(newOption);

第二种方法:也是添加单选选项,是不是简单很多了,哈哈 但是不兼容IE8及以上版本

var newsOption=new Option('nanchang1','nanchang');
select.appendChild(newsOption);

第三种方法:添加单选框看看,最佳方案,这个又方便又兼容

var nnewOption=new Option('fengcheng1','fengcheng');
select.add(nnewOption,undefined);

移除选项:

第一种方法:select.remove(i);//index从0开始

第二种方法:select.options[i]=null;

第三种方法:select.removeChild(select.options[i])

下面给大家介绍三种取消选中单选框radio的方法

本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的。

<!DOCTYPE HTML> 
<html> 
<head> 
<title>单选按钮取消选中的三种方式</title> 
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"> 
</script> 
<script type="text/javascript"> 
$(function(){ 
// 
var $browsers = $("input[name=browser]"); 
var $cancel = $("#cancel"); 
var $byhide = $("#byhide"); 
var $remove = $("#remove"); 
// 
$cancel.click(function(e){ 
// 移除属性,两种方式都可 
//$browsers.removeAttr("checked"); 
$browsers.attr("checked",false); 
}); 
// 
$byhide.click(function(e){ 
// 切换到一个隐藏域,两种方式均可 
//$("#hidebrowser").attr("checked",true); 
$("#hidebrowser").attr("checked","checked"); 
}); 
// 
$remove.click(function(e){ 
// 直接去的DOM元素,移除属性 
// 如果不使用jQuery,则可以移植此方式 
var checkedbrowser=document.getElementsByName("browser"); 
/* 
$.each(checkedbrowser, function(i,v){ 
v.checked = false; 
v.removeAttribute("checked"); 
}); 
*/
// 
var len = checkedbrowser.length; 
var i = 0; 
for(; i < len; i++){ 
// 必须先赋值为false,再移除属性 
checkedbrowser[i].checked = false; 
// 不移除属性也可以 
//checkedbrowser[i].removeAttribute("checked"); 
} 
}); 
}); 
</script> 
</head> 
<body> 
<p>您喜欢哪款浏览器?</p> 
<form> 
<input style="display:none;" id="hidebrowser" type="radio" name="browser" value=""> 
<input type="radio" name="browser" value="Internet Explorer">Internet Explorer<br /> 
<input type="radio" name="browser" value="Firefox">Firefox<br /> 
<input type="radio" name="browser" value="Netscape">Netscape<br /> 
<input type="radio" name="browser" value="Opera">Opera<br /> 
<br /> 
<input type="button" id="cancel" value="取消选中方式1" size="20"> 
<input type="button" id="byhide" value="取消选中方式2" size="20"> 
<input type="button" id="remove" value="取消选中方式3" size="20"> 
</form> 
</body> 
</html>

以上所述是小编给大家介绍的表单中单选框添加选项和移除选项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
分享15个Webpack实用的插件!!!
Mar 31 Javascript
用JS创建一个录屏功能
Nov 11 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 #Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 #Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 #Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 #Javascript
实用jquery操作表单元素的简单代码
Jul 04 #Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 #Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 #Javascript
You might like
星际原理概述
2020/03/04 星际争霸
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
js函数排序的实例代码
2013/07/01 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
Python迭代器定义与简单用法分析
2018/04/30 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
大学同学聚会邀请函
2014/01/29 职场文书
经典商业广告词
2014/03/13 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年采购员工作总结
2014/11/18 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
就业推荐表导师评语
2014/12/31 职场文书
食品药品安全责任书
2015/05/11 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server