1 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 2 3 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 4 5 <script type="text/javascript"> 6 /** 7 * 向上移动选中的option 8 */ 9 function upSelectedOption() { 10 if (null == $('#where').val()) { 11 alert('请选择一项'); 12 return false; 13 } 14 //选中的索引,从0开始 15 var optionIndex = $('#where').get(0).selectedIndex; 16 //如果选中的不在最上面,表示可以移动 17 if (optionIndex > 0) { 18 $('#where option:selected').insertBefore($('#where option:selected').prev('option')); 19 } 20 } 21 22 /** 23 * 向下移动选中的option 24 */ 25 function downSelectedOption() { 26 if (null == $('#where').val()) { 27 alert('请选择一项'); 28 return false; 29 } 30 //索引的长度,从1开始 31 var optionLength = $('#where')[0].options.length; 32 //选中的索引,从0开始 33 var optionIndex = $('#where').get(0).selectedIndex; 34 //如果选择的不在最下面,表示可以向下 35 if (optionIndex < (optionLength - 1)) { 36 $('#where option:selected').insertAfter($('#where option:selected').next('option')); 37 } 38 } 39 40 /** 41 * 移除选中的option 42 */ 43 function removeSelectedOption() { 44 if (null == $('#where').val()) { 45 alert('请选择一项'); 46 return false; 47 } 48 $('#where option:selected').remove(); 49 } 50 51 /** 52 * 获取所有的option值 53 */ 54 function getSelectedOption() { 55 //获取Select选择的Text 56 var checkText = $('#where').find('option:selected').text(); 57 //获取Select选择的Value 58 var checkValue = $('#where').val(); 59 alert('当前被选中的text=' + checkText + ', value=' + checkValue); 60 var ids = ''; 61 var options = $('#where')[0].options; 62 for (var i = 0; i < options.length; i++) { 63 ids = ids + '`' + options[i].id; 64 } 65 alert('当前被选中的编号顺序为' + ids); 66 } 67 68 /** 69 * 添加option 70 */ 71 function addSelectedOption() { 72 //添加在第一个位置 73 $('#where').prepend('<option value="hbin" id="where06">Haerbin</option>'); 74 //添加在最后一个位置 75 $('#where').append('<option value="hlj" id="where07">HeiLongJiang</option>'); 76 $('#where').attr('size', 7); 77 } 78 </script> 79 80 <div id="updown"> 81 <select id="where" name="where" size="5"> 82 <option value="hk" id="where01">Hong Kong</option> 83 <option value="tw" id="where02">Taiwan</option> 84 <option value="cn" id="where03">China</option> 85 <option value="us" id="where04">United States</option> 86 <option value="ca" id="where05">Canada</option> 87 </select> 88 </div> 89 <br/> 90 <input type="button" value="上移" onclick="upSelectedOption()"/> 91 <input type="button" value="下移" onclick="downSelectedOption()"/> 92 <input type="button" value="删除" onclick="removeSelectedOption()"/> 93 <input type="button" value="确定" onclick="getSelectedOption()"/> 94 <input type="button" value="添加" onclick="addSelectedOption()"/>
效果图：
