jQuery操作Select的Option上下移动及移除添加等等 |
复制代码 代码如下: <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"> /** * 向上移动选中的option */ function upSelectedOption(){ if(null == $(#where).val()){ alert(请选择一项); return false; } //选中的索引,从0开始 var optionIndex = $(#where).get(0).selectedIndex; //如果选中的不在最上面,表示可以移动 if(optionIndex > 0){ $(#where option:selected).insertBefore($(#where option:selected).prev(option)); } } /** * 向下移动选中的option */ function downSelectedOption(){ if(null == $(#where).val()){ alert(请选择一项); return false; } //索引的长度,从1开始 var optionLength = $(#where)[0].options.length; //选中的索引,从0开始 var optionIndex = $(#where).get(0).selectedIndex; //如果选择的不在最下面,表示可以向下 if(optionIndex < (optionLength-1)){ $(#where option:selected).insertAfter($(#where option:selected).next(option)); } } /** * 移除选中的option */ function removeSelectedOption(){ if(null == $(#where).val()){ alert(请选择一项); return false; } $(#where option:selected).remove(); } /** * 获取所有的option值 */ function getSelectedOption(){ //获取Select选择的Text var checkText = $(#where).find(option:selected).text(); //获取Select选择的Value var checkValue = $(#where).val(); alert(当前被选中的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(当前被选中的编号顺序为 + ids); } /** * 添加option */ function addSelectedOption(){ //添加在第一个位置 $(#where).prepend(<option value="hbin" id="where06">Haerbin</option>); //添加在最后一个位置 $(#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="上移" onclick="upSelectedOption()"/> <input type="button" value="下移" onclick="downSelectedOption()"/> <input type="button" value="删除" onclick="removeSelectedOption()"/> <input type="button" value="确定" onclick="getSelectedOption()"/> <input type="button" value="添加" onclick="addSelectedOption()"/> |