select 多选 multiple 选中取消后无法再次选中

本文探讨了使用键盘事件实现项目搜索功能的方法,通过监听回车键触发搜索逻辑,动态筛选匹配项并更新选择状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//可选项目回车搜索
$("#projectName").keypress(function (event) {
    if (event.keyCode == 13) {
        // $("#pjcSelect1 option").removeAttr("selected");
        $("#pjcSelect1 option").each(function () {
            console.log("---");
            // console.log($(this).attr("data-name"),$("#projectName").val(),$(this).attr("data-name").indexOf($("#projectName").val()));
            if ($(this).attr("data-name").indexOf($("#projectName").val()) != -1) {
                //这里一定要用prop 如果用attr就会出现选中取消后无法再次选中问题
                $(this).prop("selected",true);
            }else {
                $(this).prop("selected",false);
            }
        })
    }
})
在使用 Element UI 的 `el-select` 组件时,如果启用了(`multiple`)模式,默认情况下按下回车键(Enter)会选中当前高亮的项。如果希望禁用该行为,可以通过自定义键盘事件处理来实现。 具体来说,可以通过监听 `@keydown.enter.native` 事件,并阻止默认事件的传播,从而阻止回车键触发选中。以下是一个实现示例: ```vue <template> <el-select v-model="selectedValues" multiple placeholder="请择" @keydown.enter.native="handleEnterKey"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </template> <script> export default { data() { return { selectedValues: [], options: [ { label: '项1', value: '1' }, { label: '项2', value: '2' }, { label: '项3', value: '3' } ] }; }, methods: { handleEnterKey(event) { // 阻止默认的回车键行为 event.preventDefault(); } } }; </script> ``` 在上述代码中,通过 `@keydown.enter.native` 监听原生的键盘事件,并在事件处理函数中调用 `event.preventDefault()` 来阻止默认行为。这样可以有效防止在状态下按下回车键选中当前高亮的项。 需要注意的是,这种方式会完全阻止回车键的行为,如果还有其他需要通过回车键完成的操作,则需要在事件处理中进行更精细的控制,例如根据输入框的焦点状态来决定是否允许触发默认行为。 此外,Element UI 的组件行为可能会随着版本更新而发生变化,因此建议查阅最新的官方文档以确认是否有更直接的配置方式支持禁用回车键选中行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值