Home > Developer > Web Develop

JS dynamic add option and delete option

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. Dynamic creation of SELECT

function Createselect () {

var myselect = document.createelement ("select");
Myselect.id = "Myselect";
Document.body.appendChild (Myselect);
}

2. Add Options option

function AddOption () {

Find objects by 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. Remove all options option

function RemoveAll () {
var Obj=document.getelementbyid (' Myselect ');
obj.options.length=0;

}

4. Delete an option

function Removeone () {
var Obj=document.getelementbyid (' 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.getelementbyid (' 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.getelementbyid (' 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.getelementbyid (' 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.getElementById ("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.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", "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 ("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 ("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);
}
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.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:

<!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>

Create an array method with a string:

<script language= "JavaScript" >

</body>
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>--From the Internet http://apps.hi.baidu.com/share/detail/31091794

Two

<select id= "Ddlresourcetype" onchange= "GetValue (This)" >

</select>

To dynamically delete all options in select:

document.getElementById ("Ddlresourcetype"). options.length=0;

To dynamically delete an item in Select option:

document.getElementById ("Ddlresourcetype"). Options.remove (indx);

To dynamically add an item in a SELECT option:

document.getElementById ("Ddlresourcetype"). Options.add (New Option (Text,value));

Above in IE and Firefox can test success, hope you can use later.

In fact, the use of standard DOM operation is also possible, that is, Document.createelement,appendchild,removechild and the like.

Value aspect

function GetValue (obj)

{

var m=obj.options[obj.selectedindex].value

Alert (m);//Get value

var n=obj.options[obj.selectedindex].text

alert (n);//Get text

}

==============================================================================

1 Check if checked

if (Objselect.selectedindex >-1) {

Description Check

} else {

Description not selected

}

2 Delete a selected item

Objselect.options[objselect.selectedindex] = null;

3 Add-ons

Objselect.options[objselect.length] = new Option ("Hello", "Hello");

4 Modifying the items in the selection

Objselect.options[objselect.selectedindex] = new Option ("Hello", "Hello");

5 getting the text of the selected item

Objselect.options[objselect.selectedindex].text;

6 Get the value of the selected item

Objselect.options[objselect.selectedindex].value;

======================================================================

<% @LANGUAGE = "VBSCRIPT" codepage= "936"%>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>

<title>js add options to select dynamically [IE and Firefox compatible]</title>

<script language= "javascript" type= "Text/javascript" >

function Xlbchange (s) {

Switch (s) {

Case "1":

document.getElementById ("lb"). options.length=0;

var soojs_value=[0,1,2,3];

var soojs_text=["Spiritual refinement", "Style design", "goal setting", "concept promotion";

for (Var i=0;i<soojs_value.length;i++) {

var ooption = document.createelement ("OPTION");

Ooption.value=soojs_value[i];

Ooption.text=soojs_text[i];

Zpmange.lb.options.add (ooption);

}

Break

Case "2":

document.getElementById ("lb"). options.length=0;

var soojs_value=[0,1,2,3,4,5,6,7];

var soojs_text=["emblem", "motto", "Anthem", "School name Font", "School history Showroom", "Publicity book", "Propaganda CD", "Office supplies souvenir"];

for (Var i=0;i<soojs_value.length;i++) {

var ooption = document.createelement ("OPTION");

Ooption.value=soojs_value[i];

Ooption.text=soojs_text[i];

Zpmange.lb.options.add (ooption);

}

Break

Case "3":

document.getElementById ("lb"). options.length=0;

var soojs_value=[0,1,2,3];

var soojs_text=["Campus Landscape Design", "Campus sculpture Design", "Campus relief Design", "Corridor culture Design";

for (Var i=0;i<soojs_value.length;i++) {

var ooption = document.createelement ("OPTION");

Ooption.value=soojs_value[i];

Ooption.text=soojs_text[i];

Zpmange.lb.options.add (ooption);

}

Break

Case "4":

document.getElementById ("lb"). options.length=0;

var soojs_value=[0,1,2];

var soojs_text=["school System", "cultural activity", "Code of Conduct";

for (Var i=0;i<soojs_value.length;i++) {

var ooption = document.createelement ("OPTION");

Ooption.value=soojs_value[i];

Ooption.text=soojs_text[i];

Zpmange.lb.options.add (ooption);

}

Break

Default:

document.getElementById ("lb"). options.length=0;

var ooption = document.createelement ("OPTION");

ooption.value=0;

ooption.text= "Please select the category of work";

Zpmange.lb.options.add (ooption);

}

}

</script>

<body>

<form action= "zpmange.asp" name= "Zpmange" method= "POST" >

<p><select id= "Ddlresourcetype" onchange= "GetValue (This)" ><br/>

</select></p>

<p> dynamically Delete all options in select: <br/>

document.getElementById ("Ddlresourcetype"). options.length=0; <br/>

<br/>

To dynamically delete an item in Select option: <br/>

document.getElementById ("Ddlresourcetype"). Options.remove (indx); </p>

<p> dynamically add items in Select option: <br/>

document.getElementById ("Ddlresourcetype"). Options.add (New Option (Text,value)); </p>

<p> above in IE and Firefox can test success, hope you can use later. <br/>

In fact, the use of standard DOM operation is also possible, that is, Document.createelement,appendchild,removechild and the like. </p>

<p> value <br/>

function GetValue (obj) <br/>

{<br/>

var m=obj.options[obj.selectedindex].value<br/>

Alert (m);//Get value<br/>

var n=obj.options[obj.selectedindex].text<br/>

alert (n);//Get Text <br/>

}<br/>

</p>

<p> Example:</p>

<table width= "80%" border= "0" align= "center" cellpadding= "1" cellspacing= "1" style= "border-style:double" >

<tr>

<TD width= "50%" height= "><div align=" center >

<select name= "XT" Id= "XT" Onchange= "Xlbchange (this.value)" >

<option selected= "Selected" > Please select the work system </option>

<option value= "1" > Vision system </option>

<option value= "2" > Vision recognition System </option>

<option value= "3" > Environmental Vision System </option>

<option value= "4" > Behavioral Vision System </option>

</select>

</div></td>

<TD width= "61%" ><div align= "center" >

<select name= "lb" id= "lb" >

<option selected= "Selected" > Please select the work category </option>

</select>

</div></td>

</tr>

<tr>

<TD height= "203" colspan= "2" > </td>

</tr>

</table>

</form>

</body>

JS dynamic add option and delete option

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
js create option element how to add payment option in website option date option string option pricer icloud no storage and backup option algo option

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More