JS operation Select and option Common code collation _ basic knowledge

1. Get the value and text,html code for select Select as follows :

Copy Code code as follows:

<select id= "Myselect" >
<option value= "1" >one</option>
<option value= "2" >two</option>
<option value= "3" >three</option>
</select>

You can get the selected value and text from the following script code s

Copy Code code as follows:

$ ("#mySelect"). Val (); Gets the value of the selected record
$ ("#mySelect option:selected"). Text (); Gets the text value of the selected record

2, the use of new option ("Text", "value") method to add Options option

Copy Code code as follows:

var obj = document.getElementById ("Myselect"); Obj.add (New Option ("4", "4"));

3, delete all options option

Copy Code code as follows:

var obj = document.getElementById ("Myselect"); obj.options.length = 0;

4, Delete selected options option

Copy Code code as follows:

var obj = document.getElementById ("Myselect"); var index = obj.selectedindex;obj.options.remove (index);

5, modify the selected options option

Copy Code code as follows:

var obj = document.getElementById ("Myselect");
var index = Obj.selectedindex;
Obj.options[index] = new Option ("three", 3); Change the corresponding value
Obj.options[index].selected = true; Remain selected

6. Delete Select

Copy Code code as follows:

var obj = document.getElementById ("Myselect");
Obj.parentNode.removeChild (obj); Remove Current Object

7. Select Selected Response Event

Copy Code code as follows:

$ ("#mySelect"). Change (function () {//Add action code to be performed})

1. Create a Select dynamically

Copy Code code as follows:

function Createselect () {
var myselect = document.createelement_x ("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.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. Delete all options option

Copy Code code as follows:

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

4. Delete an option

Copy Code code as follows:

function Removeone () {
var obj=document.getelementbyidx_x (' 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.getelementbyidx_x (' 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.getelementbyidx_x (' 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.getelementbyidx_x (' 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.getelementbyidx_x ("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.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 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_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= "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_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);
}

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.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：

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

Creates an array method with a string:

Copy Code code as follows:

<script language= "JavaScript" >
</body>
<script>
function Spli () {
Datastr= "2,2,3,5,6,6";
var str= new Array ();
Str=datastr.split (",");
for (i=0;i<str.length; i++)
{document.write (str[i]+ "<br/>");}
}
Spli ();
</script

Debugging a section of JS today, run well on IE, debugging errors in Firefox, check the data found

Copy Code code as follows:

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, in the online search data collection of this article, real-time temperature so JS
Share!