1. Create a Select dynamically
Copy Code code as follows:
function Createselect () {
var myselect = document.createelement ("select");
Myselect.id = "Myselect";
Document.body.appendChild (Myselect);
}
2. Add Options option
Copy Code code as follows:
function AddOption () {
To find an object based on its ID,
var Obj=document.getelementbyid (' Myselect ');
Add an option
Obj.add (New Option ("text", "value"); This only works in IE.
Obj.options.add (New Option ("text", "value")); This compatible with IE and Firefox
}
3. Delete all options option
Copy Code code as follows:
function RemoveAll () {
var Obj=document.getelementbyid (' Myselect ');
obj.options.length=0;
}
4. Delete an option
Copy Code code as follows:
function Removeone () {
var Obj=document.getelementbyid (' Myselect ');
Index, to delete the ordinal number of the option, take the number of the currently selected option
var Index=obj.selectedindex;
Obj.options.remove (index);
}
5. Get the value of options option
Copy Code code as follows:
var Obj=document.getelementbyid (' Myselect ');
var Index=obj.selectedindex; Ordinal number, taking the number of the currently selected option
var val = obj.options[index].value;
6. Get Options Option text
Copy Code code as follows:
var Obj=document.getelementbyid (' Myselect ');
var Index=obj.selectedindex; Ordinal number, taking the number of the currently selected option
var val = obj.options[index].text;
7. Modify Options option
Copy Code code as follows:
var Obj=document.getelementbyid (' Myselect ');
var Index=obj.selectedindex; Ordinal number, taking the number of the currently selected option
var val = obj.options[index]=new Option ("New text", "New value");
8. Delete Select
Copy Code code as follows:
function Removeselect () {
var myselect = document.getElementById ("Myselect");
MySelect.parentNode.removeChild (Myselect);
}
The complete code for the entire instance is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//ZH-CN" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<meta http-equiv= "Content-type" content= "text/html" >
<script language=javascript>
function $ (ID)
{
return document.getElementById (ID)
}
Function Show ()
{
var selectobj=$ ("area")
var myoption=document.createelement ("option")
Myoption.setattribute ("Value", "10")
Myoption.appendchild (document.createTextNode ("Shanghai"))
var myoption1=document.createelement ("option")
Myoption1.setattribute ("value", "100")
Myoption1.appendchild (document.createTextNode ("Nanjing"))
Selectobj.appendchild (myoption)
Selectobj.appendchild (MyOption1)
}
function Choice ()
{
var index=$ ("area"). SelectedIndex;
var val=$ ("area"). Options[index].getattribute ("value")
if (val==10)
{
var i=$ ("context"). Childnodes.length-1;
var remobj=$ ("context"). Childnodes[i];
Remobj.removenode (True)
var sh=document.createelement ("select")
Sh.add (New Option ("Pudong District", "101"))
Sh.add (New Option ("Huangpu", "102"))
Sh.add (New Option ("Xuhui District", "103"))
Sh.add (New Option ("Putuo", "104"))
$ ("context"). AppendChild (SH)
}
if (val==100)
{
var i=$ ("context"). Childnodes.length-1;
var remobj=$ ("context"). Childnodes[i];
Remobj.removenode (True)
var nj=document.createelement ("select")
Nj.add (New Option ("Xuanwu District", "201"))
Nj.add (New Option ("Baixia District", "202"))
Nj.add (New Option ("Xiaguan District", "203"))
Nj.add (New Option ("Qixia District", "204"))
$ ("context"). AppendChild (NJ)
}
}
Function Calc ()
{
var x=$ ("context"). Childnodes.length-1;
Alert (x)
}
function Remove ()
{
var i=$ ("context"). Childnodes.length-1;
var remobj=$ ("context"). Childnodes[i];
Remobj.removenode (True)
}
</script>
<body>
<div id= "Context" >
<select id= "area" onchange= "Choice ()" >
</select>
</div>
<input Type=button value= "display" onclick= "Show ()" >
<input Type=button value= "Compute node" onclick= "Calc ()" >
<input Type=button value= "Delete" onclick= "remove ()" >
</body>
Improved version: adding, modifying, and deleting option elements in select
Copy Code code as follows:
function Watch_ini () {//Initial
for (var i=0; i<arguments.length; i++) {
var word = document.createelement ("option");
Word.text = Arguments[i];
Watch.keywords.add (word); Watch. is form name
}
}
function Watch_add (f) {//Increase
var word = document.createelement ("option");
Word.text = F.word.value;
F.keywords.add (word);
}
But the above add () method is only valid under IE, for the compatibility of FF and opera, the above code has been improved, the following changes code:
Copy Code code as follows:
function Watch_ini () {//Initial
for (var i=0; i<arguments.length; i++) {
var ooption=new Option (Arguments[i],arguments[i]);
document.getElementById ("Myselect") [I]=ooption;
}
}
function Watch_add (f) {//Increase
var ooption=new Option (F.word.value,f.word.value);
F.keywords[f.keywords.length]=ooption;
}
The complete code for the entire instance is as follows:
Copy Code code as follows:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<title>javascript Select options Text value</title>
<meta name= "keywords" content= "javascript Select options text value add modify delete Set" >
<meta name= "description" content= "JavaScript Select options text value add modify delete Set" >
<script language= "JavaScript" >
<!--
function Watch_ini () {//Initial
for (var i=0; i<arguments.length; i++) {
var ooption=new Option (Arguments[i],arguments[i]);
document.getElementById ("Myselect") [I]=ooption;
}
}
function Watch_add (f) {//Increase
var ooption=new Option (F.word.value,f.word.value);
F.keywords[f.keywords.length]=ooption;
}
function Watch_sel (f) {//Edit
F.word.value = F.keywords[f.keywords.selectedindex].text;
}
function Watch_mod (f) {//Modify
F.keywords[f.keywords.selectedindex].text = F.word.value;
}
function Watch_del (f) {//delete
F.keywords.remove (F.keywords.selectedindex);
}
function Watch_set (f) {//Save
var set = "";
for (var i=0; i<f.keywords.length; i++) {
Set + + F.keywords[i].text + ";";
}
Confirm (set);
}
-->
</script>
<body>
<form name= "Watch" method= "post" action= "" >
<select id= "myselect" name= "keywords" size= "ten" onchange= "Watch_sel" (this.form) "></select><br>
<script language= "JavaScript" >
<!--
Watch_ini ("I", "You", "You", "he", "she", "it", "er"); Initial keywords
-->
</script>
<input type= "text" name= "word"/><br/>
<input type= "button" value= "Add" onclick= "Watch_add (this.form);"/>
<input type= "button" value= "Modify" onclick= "Watch_mod (this.form);"/>
<input type= "button" value= "delete" onclick= "Watch_del (this.form);"/>
<input type= "button" value= "Save" onclick= "Watch_set (this.form);"/>
</form>
Creates an array method with a string:
Copy Code code as follows:
<script language= "JavaScript" >
</body>
<script>
Functionspli () {
Datastr= "2,2,3,5,6,6";
Varstr=newarray ();
Str=datastr.split (",");
for (i=0;i<str.length; i++) {
document.write (str[i]+ "<br/>");
} spli ();
</script>
