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

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

时间: 2024-08-15 21:10:16

表单中单选框添加选项和移除选项的相关文章

字体图标表单\单选框,复选框效果(完整版)

CSS: 1 h1,h2,h3{ font-size: 24px;} 2 a:hover { text-decoration: none; } 3 @font-face {font-family: "iconfont"; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') for

表单中单选、多选、选择框值的获取及表单的序列化

总结了下在表单处理中单选.多选.选择框值的获取及表单的序列化,写成了一个对象.如下: 1 var formUtil = { 2 // 获取单选按钮的值,如有没有选的话返回null 3 // elements为radio类的集合的引用 4 getRadioValue:function(elements) { 5 var value = null; // null表示没有选中项 6 // 非IE浏览器 7 if(elements.value != undefined && elements.v

jquery自动去除form表单中input框前后的空格

1. 2. <script type="text/javascript"> $(document).ready(function() { $('#searchform input').keyup(trimkeyup); }); function trimkeyup(e) { lucene_objInput = $(this); if(e.keyCode != 38 && e.keyCode != 40 && e.keyCode != 13)

JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

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

js中,表单中的选择框学习与使用总结

选择框脚本 选择框是通过<select>和<option>元素来创建.下面从对选择框的几个操作,来学习,总结Js中操作选择框的方法 一.选择选项 (1)只允许选择一项的选择框,访问选项中的最简单方式,就是使用选择框的selectIndex属性. selectedIndex 属性可设置或返回下拉列表中被选选项的索引号.设置selectedIndex会导致取消以前的所有选项并选择指定的那一项,而读取selectedIndex则只会返回选中项第一项的索引值.注意:若允许多重选择,则仅会返

单选框和多选框的注意事项

1.基本语法 <input type="ratio" value="提交到服务器的数据" name="控件命名,便于后台控制" > input 中,还可以加入checked=“checked”表示默认选中值 <input type="checkbox">复选框 2.注意事项: 在单选框中,要保证各个选项的name取值相同,达到单选作用. 但是在复选框中,name的名字要不一样,达到多选效果 1 <

Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)

一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.month.time.week. number.email.url.search.tel 和 color. <form> <div class="form-group"> <label>电子邮件</label> <input type=&

php 在同一个表单中添加和修改数据 二

好吧,其实我这人不看重访问量的,但是今天一天的访问量比我去年发的一篇还要多. 我还是有点小小的惊讶的.作为一个做技术的屌丝.不,我不认为自己是屌丝,我觉得编程是一件高大山的职业.虽然很累,但是确实能让你每天的生活很充实. No matter whether you believe it or not,anyhow I believe it. 今天接着上一篇来说,我们只是简单的文章的上传和修改. 如果涉及到附件呢.在修改的时候如果需要更换附件的时候,这真的是一件很头痛的事情. 我不知道大家是怎样实

struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($("#textValue").val() == "") {3                 $("#errortip").html("<font color='#FF0000'>请输入查询内容</font>")