Radio boxes in the form add options and remove options

2021-07-01 06:44:16
OfStack

selection Add option and put it in the last item

html code:


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


var select=document.forms[0].elements['location'];

Method 1: Add radio options


var newOption=document.createElement('option');
var newText=document.createTextNode('guangzhou');
newOption.appendChild(newText);
newOption.setAttribute('value','guangzhou');
select.appendChild(newOption);

The second method: It is also to add a single option, is it much simpler, haha but not compatible with IE8 and above


var newsOption=new Option('nanchang1','nanchang');
select.appendChild(newsOption);

Method 3: Add a radio box to see the best solution, which is convenient and compatible


var nnewOption=new Option('fengcheng1','fengcheng');
select.add(nnewOption,undefined);

Remove options:

The first method: select. remove (i); //index Start at 0

The second method: select. options [i] = null;

Method 3: select. removeChild (select. options [i])

Here are three ways to uncheck the radio box radio

This article relies on jQuery, of which the first and second methods are implemented using jQuery, and the third method is implemented based on JS and DOM.


<!DOCTYPE HTML> 
<html> 
<head> 
<title> Radio button to uncheck the 3 A kind of way </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){ 
//  Remove Attributes , Either way  
//$browsers.removeAttr("checked"); 
$browsers.attr("checked",false); 
}); 
// 
$byhide.click(function(e){ 
//  Switch to 1 Hidden fields , Either way  
//$("#hidebrowser").attr("checked",true); 
$("#hidebrowser").attr("checked","checked"); 
}); 
// 
$remove.click(function(e){ 
//  Go directly DOM Element , Remove Attributes  
//  If you do not use jQuery, You can port this approach  
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++){ 
//  You must first assign a value to false, Remove the property again  
checkedbrowser[i].checked = false; 
//  You can also do it without removing attributes  
//checkedbrowser[i].removeAttribute("checked"); 
} 
}); 
}); 
</script> 
</head> 
<body> 
<p> Which browser do you like? </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=" Uncheck method 1" size="20"> 
<input type="button" id="byhide" value=" Uncheck method 2" size="20"> 
<input type="button" id="remove" value=" Uncheck method 3" size="20"> 
</form> 
</body> 
</html>