JQuery operates Select options to move up and down, remove and add, etc.

Copy codeThe Code is as follows:
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">

<Script type = "text/javascript" src = "jquery-1.9.1.min.js"> </script>

<Script type = "text/javascript">
/**
* Move the selected option up
*/
Function upSelectedOption (){
If (null ==$ ('# where'). val ()){
Alert ('select an Project ');
Return false;
}
// Selected index, starting from 0
Var optionIndex = $ ('# where'). get (0). selectedIndex;
// If the selected part is not at the top of the list, it indicates that it can be moved.
If (optionIndex> 0 ){
$ ('# Where option: selected'). insertBefore ($ (' # where option: selected'). prev ('option '));
}
}

/**
* Move the selected option downward.
*/
Function downSelectedOption (){
If (null ==$ ('# where'). val ()){
Alert ('select an Project ');
Return false;
}
// Index length, starting from 1
Var optionLength = $ ('# where') [0]. options. length;
// Selected index, starting from 0
Var optionIndex = $ ('# where'). get (0). selectedIndex;
// If the selected part is not at the bottom, it indicates that it can be down.
If (optionIndex <(optionLength-1 )){
$ ('# Where option: selected'). insertAfter ($ (' # where option: selected'). next ('option '));
}
}

/**
* Remove the selected option.
*/
Function removeSelectedOption (){
If (null ==$ ('# where'). val ()){
Alert ('select an Project ');
Return false;
}
$ ('# Where option: selected'). remove ();
}

/**
* Obtain all option values
*/
Function getSelectedOption (){
// Obtain the selected Text
Var checkText = $ ('# where'). find ('option: selected'). text ();
// Obtain the Value selected by the Select statement.
Var checkValue = $ ('# where'). val ();
Alert ('selected text = '+ checkText +', value = '+ checkValue );
Var ids = '';
Var options = $ ('# where') [0]. options;
For (var I = 0; I <options. length; I ++ ){
Ids = ids + ''' + options [I]. id;
}
Alert ('the order of the currently selected numbers is '+ ids );
}

/**
* Add option
*/
Function addSelectedOption (){
// Add to the first position
$ ('# Where'). prepend (' <option value = "hbin" id = "where06"> Haerbin </option> ');
// Add to the last position
$ ('# Where'). append (' <option value = "hlj" id = "where07"> HeiLongJiang </option> ');
$ ('# Where'). attr ('SIZE', 7 );
}
</Script>

<Div id = "updown">
<Select id = "where" name = "where" size = "5">
<Option value = "hk" id = "where01"> Hong Kong </option>
<Option value = "tw" id = "where02"> Taiwan </option>
<Option value = "cn" id = "where03"> China </option>
<Option value = "us" id = "where04"> United States </option>
<Option value = "ca" id = "where05"> Canada </option>
</Select>
</Div>
<Br/>
<Input type = "button" value = "Move Up" onclick = "upSelectedOption ()"/>
<Input type = "button" value = "Move Down" onclick = "downSelectedOption ()"/>
<Input type = "button" value = "delete" onclick = "removeSelectedOption ()"/>
<Input type = "button" value = "OK" onclick = "getSelectedOption ()"/>
<Input type = "button" value = "add" onclick = "addSelectedOption ()"/>