下拉框上移下移添加移除demo

Posted 2020-06-10

 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()"/> 

效果图：