select实现多选、全选、全不选

5 篇文章 0 订阅

今天使用select下拉框实现了全选,全不选和多选的功能,效果如图:
这里写图片描述
1、html代码:

为select标签设置multiple属性为true
<select id="myselect" multiple="true">
    <option value="1">java</option>
    <option value="2">javaSE</option>
    <option value="3">javaEE</option>
</select>

截图和代码不相符,因为我用的是struts2框架,使用的是<s:select>标签,直接使用list获取下拉选项的,这里只是说明一下问题。关于s:select标签可以参考下面这个链接:
s:select标签的使用和相关属性说明
2、js代码:
接下来就是在js中设置select标签的多选功能:

$("#myselect").multiselect({
    noneSelectedText : "--请选择--", //当没有内容选中时候显示的文本
    checkAllText : "全选", //全选按钮显示的文本
    uncheckAllText : "全不选", //全不选按钮显示的文本
    minWidth : 200, //select框的宽度,根据option的内容长短设置
    selectedList : 2 //当选中的内容超过2条时,显示“n已选择”
});

别忘了引入js和css文件,这两个文件收了1大洋,木有积分的亲们可以加3393055725分享,下载地址:
http://download.csdn.net/detail/cat_pp/9774366

  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
实现Vue Select多选全选功能,你可以使用以下步骤: 1. 在Vue组件中,使用`v-model`指令将选择的值绑定到一个数据属性上,例如`selectedOptions`。 2. 添加一个全选的复选框,用于选择或取消选择所有选项。你可以使用一个单独的数据属性,例如`selectAll`,来保存全选复选框的状态。 3. 在Vue的模板中,为每个选项添加一个复选框,并将其选择状态与对应的选项绑定。使用`v-model`指令将选中状态绑定到一个临时的`isChecked`属性上。 4. 监听全选复选框的变化,当全选复选框的状态改变时,更新每个选项的选择状态。 下面是一个示例代码: ```html <template> <div> <input type="checkbox" v-model="selectAll" @change="selectAllOptions"> <label for="select-all">全选</label> <select multiple v-model="selectedOptions"> <option v-for="option in options" :value="option.value" :key="option.value"> <input type="checkbox" :value="option.value" v-model="option.isChecked"> {{ option.label }} </option> </select> </div> </template> <script> export default { data() { return { options: [ { label: '选项1', value: 'option1', isChecked: false }, { label: '选项2', value: 'option2', isChecked: false }, { label: '选项3', value: 'option3', isChecked: false }, // 添加更多选项... ], selectedOptions: [], selectAll: false, }; }, methods: { selectAllOptions() { this.options.forEach((option) => { option.isChecked = this.selectAll; }); if (this.selectAll) { this.selectedOptions = this.options.map((option) => option.value); } else { this.selectedOptions = []; } }, }, }; </script> ``` 在上面的示例中,我们使用了一个`options`数组来存储所有的选项。每个选项都有一个`isChecked`属性来表示其选择状态。当全选复选框改变时,我们遍历所有选项并更新它们的选择状态。同时,我们根据选择状态更新`selectedOptions`数组,以便在多选框中显示被选择的选项。 希望这能帮助到你实现Vue Select多选全选功能!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值