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