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


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 textarea的长度进行验证
May 06 Javascript
js对象的比较
Feb 26 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
JS Attribute属性操作详解
May 19 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
JavaScript实现缓动动画
Nov 25 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/09/20 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
医学院学生求职简历的自我评价
2013/10/24 职场文书
电子商务自荐书范文
2014/01/04 职场文书
暑期培训随笔感言
2014/03/10 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书