为chosen jQuery插件动态添加未找到的下拉框值

**me

于 2020-04-22 15:03:09 发布

阅读量471

点赞数

CC 4.0 BY-SA版权

分类专栏：前端插件使用文章标签： jquery chosen

本文链接：https://blog.youkuaiyun.com/Zy_design/article/details/105681575

前端插件使用专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Chosen插件实现用户输入值动态添加为下拉选项，并保存至后台。通过监听chosen:no_results事件，捕捉用户输入的Enter键，将新值添加到<select>元素中，并触发chosen:updated事件更新下拉框。

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

一.问题描述

做项目的时候遇到的问题:chosen选项中没有可选值,想实现用户输入的值动态添加入option,存到后台保存

二.插件准备

下载网址:https://harvesthq.github.io/chosen/,在页面引入css样式和js

三.代码

html:

<select name="leader_name" id="leader_name">
<option value="住">住</option>
<option value="住小明">住小明</option>
<option value="熊芳">熊芳</option>
</select>

js:

```css
<script>
  $(document).ready(function () {
        var leader_name = '#leader_name';
        //chosen初始化
        $(leader_name).chosen({
            width: "90%",
            no_results_text: "未找到该用户,按回车即可增加"
        });
        $(leader_name).on('chosen:no_results', function (e, params) {
        //获取chosen搜索框的input,插件自带
            $('.chosen-search input').keyup(function (event) {
            //判断用户是否输入enter键,否则chosen:no_results方法默认按一个键盘就执行一次,则会插入多个
                var keynum = (event.keyCode ? event.keyCode : event.which);
                if (keynum == '13') {
                    $(leader_name).append(new Option($('.no-results span').html(), $('.no-results span').html()));
                    //插入完之后动态刷新下拉框
                    $(leader_name).trigger("chosen:updated");
                }
            });
        });
    });
    </script>