Home > Developer > Web Develop
1. Dynamic creation of SELECT
function Createselect () {
var myselect = document.createelement_x ("select");
Myselect.id = "Myselect";
Document.body.appendChild (Myselect);
}
2. Add Options option
function AddOption () {
Find objects by ID,
var obj=document.getelementbyidx_x (' 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. Remove all options option
function RemoveAll () {
var obj=document.getelementbyidx_x (' Myselect ');
obj.options.length=0;
}
4. Delete an option
function Removeone () {
var obj=document.getelementbyidx_x (' Myselect ');
Index, to remove the ordinal of the option, take the ordinal of the currently selected option
var Index=obj.selectedindex;
Obj.options.remove (index);
}
5. Get the value of option options
var obj=document.getelementbyidx_x (' Myselect ');
var Index=obj.selectedindex; Ordinal, take the ordinal of the currently selected option
var val = obj.options[index].value;
6. Get the text of options option
var obj=document.getelementbyidx_x (' Myselect ');
var Index=obj.selectedindex; Ordinal, take the ordinal of the currently selected option
var val = obj.options[index].text;
7. Modify Options option
var obj=document.getelementbyidx_x (' Myselect ');
var Index=obj.selectedindex; Ordinal, take the ordinal of the currently selected option
var val = obj.options[index]=new Option ("New text", "New value");
8. Delete Select
function Removeselect () {
var myselect = document.getelementbyidx_x ("Myselect");
MySelect.parentNode.removeChild (Myselect);
}
The complete code for the entire instance is 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.getelementbyidx_x (ID)
}
Function Show ()
{
var selectobj=$ ("area")
var myoption=document.createelement_x ("option")
Myoption.setattribute ("Value", "10")
Myoption.appendchild (document.createTextNode ("Shanghai"))
var myoption1=document.createelement_x ("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_x ("select")
Sh.add (New Option ("Pudong", "101"))
Sh.add (New Option ("Huangpu", "102"))
Sh.add (New Option ("Xuhui", "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_x ("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= "show" onclick= "Show ()" >
<input Type=button value= "Compute node" onclick= "Calc ()" >
<input Type=button value= "Remove" onclick= "Remove ()" >
</body>
Improved version: Add, modify, and delete option elements in select
function Watch_ini () {//Initial
for (var i=0; i<arguments.length; i++) {
var word = document.createelement_x ("OPTION");
Word.text = Arguments[i];
Watch.keywords.add (word); Watch. is form name
}
}
function Watch_add (f) {//Increase
var word = document.createelement_x ("OPTION");
Word.text = F.word.value;
F.keywords.add (word);
}
However, the above add () method is only valid under IE, for the compatibility of FF and opera, the above code is improved, the following code is changed: function Watch_ini () {//Initial
for (var i=0; i<arguments.length; i++) {
var ooption=new Option (Arguments[i],arguments[i]);
Document.getelementbyidx_x ("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:
<!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.getelementbyidx_x ("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>
Create an array method with a string:
<Scriptlanguage= "JavaScript"> </body></html><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
Today debugging a section of JS, in IE, running well, debugging errors on Firefox, check the data found
Obj.add (New Option ("text", "value")); This only works in IE.
Obj.options.add (New Option ("text", "value")); This compatible with IE and Firefox
Because of this code, on-line search data collection This article, real-time temperature JS
Share!!
JS Operation Select and option
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
