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

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>

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

赞 (0)

相关推荐

  • PHP判断表单复选框选中状态完整例子

    网页表单中经常用到复选框,那么如何用PHP来判断提交的表单中哪些复选框被选中,并读取其中的数据呢. 首先建立一个表单:form.html 复制代码 代码如下: <form action=checkbox.php method=post> <input name="s[]" type="checkbox" value="3" />3<br> <input name="s[]" type=

  • 表单复选框向PHP传输数据的代码

    表单复选框就是checkbox 1.checkbox的应用  复制代码 代码如下: <input type="checkbox" name="ch" value="2">  2.由于我传输的是在php循环中产生的数组,因此value也要设成变量:     <?php         for($i=0;$i<10;$i++){     ?>      <input type="checkbox"

  • JavaScript判断表单中多选框checkbox选中个数的方法

    JavaScript判断表单中多选框checkbox选中个数的方法

    本文实例讲述了JavaScript判断表单中多选框checkbox选中个数的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript检测并判断出表单中多选框的选中个数,也就是checkbox被选择了多少,在以前,这个问题经常被各大论坛问到,因为检测checkbox不像检测输入框那么简单,尤其是判断个数也经常会遇到,所以说觉得这个Js代码还是很有用的,大家有兴趣的再完善一下. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ch

  • PHP获取表单所有复选框的值的方法

    通常来说,php中总是只获取最后一个复选框的值,那么如何才能获取所有复选框的值? 解决办法如下: form表单的部分代码如下: <input type="checkbox" name="frm_tag[]" value="1">1 <input type="checkbox" name="frm_tag[]" value="2">2 <input type=

  • 用Javscript实现表单复选框的全选功能

    一个比较常见的全选功能,前天在弄后台的时候有看到,整理了一下.具体: //说明:form1为表单名,mId为复选框,selectbutton为全选按钮  <script language="javascript">     function selectAll()      {  for (var i=0;i<document.form1.mId.length;i++) {  var temp=document.form1.mId[i];  temp.checked=

  • jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证

    jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> &l

  • 用 Javascript 验证表单(form)中多选框(checkbox)值

    本文介绍了一个较为通用的获取 checkbox 值的方法,希望对新手有用. 复制代码 代码如下: <script type="text/javascript"> // 说明: 用 Javascript 验证表单(form)中多选框(checkbox)的值 // 作者: CodeBit function getCheckboxValue(checkbox) { if (!checkbox.length && checkbox.type.toLowerCase(

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

    selection添加option并放在最后一项 html代码: <form> <select name="location" id="location"> <option value="beijing1">beijing</option> <option value="shanghai1">shanghai</option> <option val

  • js表单中选择框值的获取及表单的序列化

    本文特意为js表单中选择框值的获取及表单的序列化做了下总结,写成了一个对象,分享给大家,欢迎大家学习. var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value

  • jQuery实现批量判断表单中文本框非空的方法(2种方法)

    本文实例讲述了jQuery实现批量判断表单中文本框非空的方法.分享给大家供大家参考,具体如下: 方法一: <script type="text/javascript"> /* * 批量验证表单非空 * 需要非空验证控件的样式class="mustadd" */ $(".mustadd").each(function(){ if($(this).val() == ''){ alert("该项不可为空!"); $(th

  • 基于JavaScript实现单选框下拉菜单添加文件效果

    基于JavaScript实现单选框下拉菜单添加文件效果

    本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript实现的,具体详情如下所示: 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语 演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type"

  • JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)

    JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)

    先上三张效果图:     这些功能在Java Web开发中可能是经常需要的,虽然很简单却使很实用的功能,这里记录下以免忘记. 1. 先说表单提交前验证:后台经常用到(这里是提交后统一验证,及时验证请参考我另一篇文章 http://blog.csdn.net/jianzhonghao/article/details/52503431) 1.1 通过submit 按钮提交后 会根据form的属性action="路径"来跳转到相应的路径,这时,给form添加一个 onsubmit =&quo

  • Spring Security在标准登录表单中添加一个额外的字段

    概述 在本文中,我们将通过向标准登录表单添加额外字段来实现Spring Security的自定义身份验证方案. 我们将重点关注两种不同的方法,以展示框架的多功能性以及我们可以使用它的灵活方式. 我们的第一种方法是一个简单的解决方案,专注于重用现有的核心Spring Security实现. 我们的第二种方法是更加定制的解决方案,可能更适合高级用例. 2. Maven设置 我们将使用Spring Boot启动程序来引导我们的项目并引入所有必需的依赖项.  我们将使用的设置需要父声明,Web启动器和安

  • layui+SSM的数据表的增删改实例(利用弹框添加、修改)

    本人前端知识相当于小白,初学SSM时,了解了layui前端框架,所以开始研究了数据表的增删改查,由于js.ajax知识不是很好,所以百度了相关ajax操作,用以借鉴.希望能帮助有需要的初学者,不喜勿喷,另外有相关不足,希望大家可以指出,谢谢! 注: 以下前端代码都是利用layui的框架,后台是SSM 前端: <%-- Created by IntelliJ IDEA. User: SL Date: 2019/2/26 Time: 14:03 To change this template use

  • JS实现表单中点击小眼睛显示隐藏密码框中的密码

    领导交个一个任务,要求在表单中点击小眼睛显示隐藏密码框中的密码!在一些网站中经常会用到这样的功能,今天小编就给大家分享我的实现思路及代码 准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 最终效果图 css样式部分,样式可根据自己喜好设置,没有过硬要求 <style> div:first-child { width: 300px; height: 50px; background-color: red; color: white; margin: 20px

随机推荐