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


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实现目录浏览与编辑的代码
Oct 21 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
Js跳出两级循环方法代码实例
Sep 22 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安装为Apache DSO
2006/10/09 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
深入php处理整数函数的详解
2013/06/09 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
浅谈js原生拖放
2016/11/21 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
深入解读Python解析XML的几种方式
2016/02/16 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
最新销售员个人自荐信
2013/09/21 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
硕士学位论文评语
2014/12/31 职场文书
给病人的慰问信
2015/03/23 职场文书
赞美教师的句子
2019/09/02 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python