JavaScript gets the full solution of the value of a select

Get the displayed Kanji

document.getElementById ("Bigclass"). Options[window.document.getelementbyid ("Bigclass"). SelectedIndex].text

Getting IDs in the database

Window.document.getElementById ("Bigclass"). Value

Gets the index ID of the select Group assignment

Window.document.getElementById ("Bigclass"). SelectedIndex

Example:

<select name= "Bigclass" id= "Bigclass" onchange= "Javascript:updatepage2" (); " >
<option value= "" selected= "selected" >ajax experiment </option>
<option value= "4" > I fit the city Kazakhstan </option>
</select>

Use
document.getElementById ("Bigclass"). Options[window.document.getelementbyid ("Bigclass"). SelectedIndex].text
The result is: I am suitable for the city ha

Use
Window.document.getElementById ("Bigclass"). Value
The results are: 4

Use
Window.document.getElementById ("Bigclass"). SelectedIndex
The results are: 1

One, add an option
var Sel=document.getelementbyid ("ID of select");
var op=document.createelement ("option");
Op.value= value;
op.text= display text;
Sel.add (OP);

Second, delete an option
var Sel=document.getelementbyid ("Typelist");
if (sel.selectedindex==-1)
Alert ("Please select the item you want to delete!");
for (Var i=0;i<sel.options.length;i++) {
if (sel.options[i].selected) {
Sel.options.remove (i);
Break
}
}

All option to empty Select
var Citysel=document.getelementbyid ("ID of select");
citysel.options.length=0;


Iv. get the value of the selected item
var Citysel=document.getelementbyid ("ID of select");
var Selectedvalue=citysel.value;


Get the index of the currently selected item
var Selectedindex=document.all.objselect.selectedindex;

Vi. setting the current selection for a Select
Method 1 (Single Select): document.getElementById ("products_type_id"). Selectedindex=1;
Method 2 (Cascade Select, such as provincial-departmental Union):
var Province_sel=document.getelementbyid ("province");//Get province Select
var City_sel=document.getelementbyid ("City");
for (Var i=0;i<province_sel.options.length;i++) {
if (province_sel.options[i].value== "The value of a province obtained from the database") {
Province_sel.options[i].selected=true;
Break
}
}
Initcity ("The value of the province obtained from the database");//Initialize the city Select
for (Var i=0;i<city_sel.options.length;i++) {
if (city_sel.options[i].value== "${city}") {
City_sel.options[i].selected=true;
Break
}
}

VII. Create select dynamic settings check
var Sel=document.getelementbyid ("Other_state");
var Sel_val=document.getelementbyid ("other_media_id"). InnerHTML;

for (Var obj in data) {
var id=data[obj]["other_media_id"];
var name=data[obj]["Other_media_name"];
var op=document.createelement ("option");
Op.setattribute ("value", id);
Op.appendchild (document.createTextNode (name));
if (id==sel_val) {
Op.setattribute ("Selected", "true");
}
Sel.appendchild (OP);
}

1. Add option to select
function Fnadditem (text,value)
{
var seltarget = document.getElementById ("Selid");

Seltarget.add (New Option ("text", "value"));
}

2. Delete option in Select
function Fnremoveitem ()
{
var seltarget = document.getElementById ("Selid");

if (Seltarget.selectedindex >-1)
{//Description selected
for (Var i=0;i<seltarget.options.length;i++)
{
if (seltarget.options[i].selected)
{
Seltarget.remove (i);

i = i-1;//Note this line
}
}
}
}
3. Move option in Select to another select
function Fnmove (Fromselectid,toselectid)
{
var from = document.getElementById (Fromselectid);
var to = document.getElementById (Toselectid);

for (Var i=0;i<from.options.length;i++)
{
if (from.options[i].selected)
{
To.appendchild (From.options[i]);
i = i-1;
}
}
}
The code in the if can also be replaced with the following code

var op = from.options[i];
To.options.add (New Option (Op.text, Op.value));
From.remove (i);
4, select option in the Move up and down
function Fnup ()
{
var sel = document.getElementById ("Selid");
for (Var i=1 i < sel.length; i++)
{//The top one does not need to be moved, so start directly from I=1
if (sel.options[i].selected)
{
if (!sel.options.item (i-1). Selected)
{//One of the above is not selected, switch up and down
var selText = Sel.options[i].text;
var selvalue = Sel.options[i].value;

Sel.options[i].text = Sel.options[i-1].text;
Sel.options[i].value = Sel.options[i-1].value;
sel.options[i].selected = false;

Sel.options[i-1].text = SelText;
Sel.options[i-1].value = Selvalue;
Sel.options[i-1].selected=true;
}
}
}
}
The following code can also be used for the next two swaps, but the efficiency is low because each DOM operation will cause the entire page to be reordered, so it is better to modify the element's property values directly.

var ooption = Sel.options[i]
var oprevoption = sel.options[i-1]
Sel.insertbefore (ooption,oprevoption);
Move down, empathy.

function Fndown ()
{
var sel = fngettarget ("Selleftorright");
for (var i=sel.length-2 i >= 0; i--)
{//Move down, the last one does not need to be processed, so go straight from the penultimate second
if (Sel.options.item (i). Selected)
{
if (!sel.options.item (i+1). Selected)
{//Option not selected below, swap up and down
var selText = Sel.options.item (i). text;
var selvalue = Sel.options.item (i). value;

Sel.options.item (i). Text = Sel.options.item (i+1). text;
Sel.options.item (i). Value = Sel.options.item (i+1). value;
Sel.options.item (i). selected = false;

Sel.options.item (i+1). Text = SelText;
Sel.options.item (i+1). value = Selvalue;
Sel.options.item (i+1). Selected=true;
}
}
}
}
5, select the sort of option
This is done with the array object's Sort method, which accepts a function parameter that defines the algorithm logic to use when sorting in this function.
Array.Sort ([comparefunction]) Comparefunction accepts two parameters (P1,P2), and when the sort operation occurs, the array object passes two values at a time to compare ; Comparefunciton must return an integer value: When the return value is >0, P1 is ranked after P2; When the return value is <0, P1 is in front of the P2, and when the value =0 is returned, no action is made.
For example:

function Fncompare (a,b)
{
if (a < b)
return-1;
if (a > B)
return 1;
return 0;
}
var arr = new Array ();
Add some value into arr
Arr.sort (Fncompare);
The result of the sort operation here is that the items in the Arr are sorted in ascending order from small to large.
If you change the fncompare into
if (a < b)
return 1;
if (a > B)
return-1;
return 0;
The result of the sort is sorted in descending order

OK, here's the sort of option in select

Because sort can be sorted by option value, or by text, which only shows the sort by value
function Sortitem ()
{
var sel = document.getElementById ("Selid");
var sellength = sel.options.length;
var arr = new Array ();
var arrlength;

Place all option into array
for (Var i=0;i<sellength;i++)
{
Arr[i] = sel.options[i];
}
Arrlength = Arr.length;

    Arr.sort (fnsortbyvalue);//Sort
   //First delete the previous option
    while (sellength--)
    {
        sel.options[sellength] = Null
   }
   //Put sorted option back in select
    for (i=0;i<arrlength;i++)
     {
        sel.add (New Option (Arr[i].text,arr[i].value));
    }
}
function Fnsortbyvalue (a,b)
{
    var acomp = a.value.tostring ();
&nb sp;   var bcomp = b.value.tostring ();

    if (Acomp < Bcomp)
        return-1
     if (Acomp > Bcomp)
        return 1;
    return 0;< br>}
You can also have more options when sorting, such as sorting the value value as an integer or string, and getting a different result. Space limit, not to do more introduction.
I write all of these operations in a single file, running the effect as shown (click on the larger image)