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實現(xiàn)的,第三種方式是基于JS和DOM實現(xiàn)的。
<!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>
以上所述是小編給大家介紹的表單中單選框添加選項和移除選項,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對綠夏網(wǎng)網(wǎng)站的支持!