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

一.问题描述

做项目的时候遇到的问题: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>

四.效果图

 修改之前:

 修改之后:

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

jquery插件 autoComboBox 自动创建联动的下拉框如:省市区联动
废话{ 诞生背景: 问: 1.大家在做省市区下拉框联动,或者是产品分类联动,或者是部门联动等下拉框时怎么做? 是用ajaxpro.dll 还是jquery ajax呢?? 答: 是,留下继续阅读. ...
php可输入的下拉框,jQuery实现可输入搜索文字的下拉框实例代码
利用jQuery实现可输入搜索文字的下拉框先看效果功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面. 用的的js: var ...
java省市县联动下拉框选择_原生JavaScript实现动态省市县三级联动下拉框菜单实例代码...
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做 ...
easyexcel生成动态模板（模板支持下拉框），动态字段导出excel表格，常规字段导出excel表格
备注:动态字段导出主要是用了反射的原理,跟excel需要导出的字段一一映射.话不多说,直接上代码: 1.生成的动态模板如图: 如上图,如果下拉框里不是选择的值,会给用户提示,下拉框用来限制用户导入只能 ...
jquery获取单选框复选框下拉框值
jquery获取单选框(radio)复选框(checkbox)下拉框(select)的值,亲测可用.有什么疑问可以留言效果图: html代码: <!DOCTYPE html> <h ...
html点击文字下拉,利用jQuery实现可输入搜索文字的下拉框
先看效果功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面. 用的的js: var $xialaSELECT; $(docum ...
jQuery打印插件jqprint，无法打印select下拉框的值
插件的使用方法场景描述:打印页面时,要打印出选中的下拉列表值 2-1. 项目使用技术较旧,页面是jsp语法,下拉列表是jsp语法遍历加载 <div class="col-xs-2&q ...
动态select可搜索的下拉框，重置chosen
1.效果图 2.代码 1)html <div class="col-sm-4"><select id="childId" name=" ...
html下拉列表框怎么添加数据,给html下拉框控件自动添加数据
function AddRow(){ var myTable = tElementById("ctl00_ContentPlaceHolder1_zjjzzTB"); var ne ...

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

一.问题描述

二.插件准备

三.代码

四.效果图

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

最新文章

热门文章