手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >表单中单选框添加选项和移除选项
表单中单选框添加选项和移除选项
摘要:selection添加option并放在最后一项html代码:beijingshanghaichengduchangshajs代码:vars...

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 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>

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

【表单中单选框添加选项和移除选项】相关文章:

jQuery实现不断闪烁文字的方法

jQuery切换所有复选框选中状态的方法

快速判断某个值是否在select中的方法

jQuery实现表格行上下移动和置顶效果

纯javascript实现四方向文本无缝滚动效果

jQuery实现在列表的首行添加数据

jQuery获取字符串中出现最多的数

免费空间广告万能消除代码

表单的一些基本用法与技巧

自适应图片大小的弹出窗口

精品推荐
分类导航