Posted in Javascript onNovember 18, 2013
<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()"/>
jQuery操作Select的Option上下移动及移除添加等等
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@