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


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+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
关于Vue组件库开发详析
Jul 01 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
php学习之流程控制实现代码
2011/06/09 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
网页常用特效代码整理
2006/06/23 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
vue登录注册实例详解
2019/09/14 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
OpenCV 边缘检测
2019/07/10 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
详解python中docx库的安装过程
2019/11/08 Python
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs