您的位置：首页 > Web前端 > JQuery

jQuery实现全选与不全选及表单对象属性过滤

2018-02-01 19:36 302 查看

jQuery实现全选与不全选及表单对象属性过滤

一、步骤分析
1、设计好页面
2、绑定单击事件驱动函数
3、编写函数
4、函数内获取下拉选框再使用索引过滤条件
5、使用appendTo把选中内容增加到指定的下拉选框
二、代码实现
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>左右选中移动</title>
</head>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(function(){
//选中按钮派发事件
$("#in8").click(function(){
//按钮被单击，选中下拉选option标签选中的第一个增加到右边的下拉选
$("#in9 option:selected:first").appendTo($("#right"));
});
$("#ina").click(function(){
//按钮被单击，选中下拉选option标签选中的增加到右边的下拉选
$("#in9 option:selected").appendTo($("#right"));
});
$("#inb").click(function(){
//按钮被单击，选中下拉选option标签中的增加到右边的下拉选
$("#in9 option").appendTo($("#right"));
});
});
</script>

<select id="in9" multiple="true" style="height: 300px;width: 200px;">
<option>其</option>
<option>实</option>
<option>我</option>
<option>很</option>
<option>爱</option>
<option>你</option>
</select>
<input type="button" id="in8" value=">移动一个"/>
<input type="button" id="ina" value=">>移动选中"/>
<input type="button" id="inb" value=">>>全部移动"/>
<select id="right" multiple="true" style="height: 300px;width: 200px;">

</select>

</html>

三、表单属性过滤器
:enabled 可用的
:disabled 不可用
:checked 选中的(针对于单选框和复选框的)
:selected 选中的(针对于下拉选)

四、结果展示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航