文档章节

Select2 下拉单自动补全

kt431128
 kt431128
发布于 2014/11/05 10:35
字数 301
阅读 110
收藏 0

Select2 下拉单自动补全

1、下载select2所需要的js包

官网地址:http://ivaynberg.github.io/select2/

2、select2的开发 新增

前台开发:

js

<script src="<%=path%>/js/common/select2.js"></script>
<link href="<%=path%>/css/common/select2.css" rel="stylesheet"/>
<script src="<%=path%>/js/common/select2_locale_zh-CN.js"></script>
$(document).ready(

function() {
$("#showCountry").select2();

}

var show_country = "";

//jquery获取选中的值,一直获取不到,想到的临时解决办法,修改了底层select2.js的方法,添加name="selectdata"

/***

   formatted=this.opts.formatSelection(data, choice.find("div"), this.opts.escapeMarkup);
            if (formatted != undefined) {
                choice.find("div").replaceWith("<div><input type='text' style='display:none;' name='selectdata' value="+data.id+"></input>"+formatted+"</div>");
            }
**/

$('input[name="selectdata"]').each(function() {

show_country += $(this).val() + ",";
});


html

<tr class="sw_tr_ctn">
<td class="ctn_word" align="right">XXXXXXXXX:</td>
<td class="ctn_input" colspan="3" align="left"><select id="showCountry" multiple style="width: 60%;" class="populate">
<c:forEach var="obj2" items="${countries}" varStatus="status">
<option value="${obj2.code_value}">${obj2.code_name}</option>
</c:forEach>
</select><span class="required">*</span></td>
</tr>



修改:

js

$(document).ready(
function() {
/*******************************************************************
* 异步加载
*/
var id = $('#id').val();
$.post(path + "/publicity/getshow_country_code", {
id : id
}, function(data) {
var codestr = data.split(",");
var obj22 = [];
for ( var i = 0; i < codestr.length; i++) {
obj22.push(codestr[i]);
}
$('#show_country').select2("val", obj22);
});


}

html

  <tr class="sw_tr_ctn">
             <td class="ctn_word" align="right">XXXXXXXXX:</td>
             <td class="ctn_input" colspan="3" align="left">
             
             <select id="show_country" name="show_country" multiple style="width:60%;" class="populate">
<c:forEach var="obj2" items="${countries}" varStatus="status">
<option value="${obj2.code_value}">${obj2.code_name}</option>
</c:forEach>
</select>
<font class="required">*</font>
</td>
            
         </tr>






© 著作权归作者所有

kt431128
粉丝 13
博文 149
码字总数 68823
作品 0
海淀
程序员
私信 提问
jquery select2()的用法

用jquery的select2()插件写了一个自动补全的搜索框,jquery版本是:1.10.2 select2()版本是3.5.4 部分代码如下:只要加上ajax属性就报:Uncaught Error: Option 'ajax' is not allowed for Sele......

easonjiven
2015/09/02
14.3K
2
YII2 Select2插件使用小计

先给出文档的地址: https://www.yiiframework.com/extension/yii-select2 最近在看到很多网站给用户打标签,或者是多个下拉选择之后变成一个标签。觉得交互不错!调研发现有开源的yii-selec...

叫我哀木涕
2018/11/29
0
0
bootstrap select 下拉框没选择

情况:根据取得的值去选定select下拉框的选项。但不知为何每次根据select的id传递值过去了,也能取得对应的值,但是页面上的select依然是下拉框第一个选项,但点击下拉框时,会在对应的值有特...

梦随风飘v
2018/08/15
0
0
自动完成下拉框 Select2

@成武 你好,想跟你请教个问题:自动完成下拉框 Select2那个我把代码运行之后并没有你说的效果啊?

丹丹丁丁
2017/03/27
206
0
select2如何让初始化的选项和ajax自动补全共存?!

场景: 用select2标签选择 后端默认有10个推荐标签(针对不同的文章内容推荐标签不同) 运营允许自己输入关键字搜索(ajax自动完成) 问题来了! select2 配置了ajax之后不显示默认的10个推荐...

yt0923666
2017/04/23
557
4

没有更多内容

加载失败,请刷新页面

加载更多

0.01-Win10安装linux子系统

一、安装Debian子系统 -1、控制面板设置: -1.1、打开“控制面板” —— “程序” —— “启用或关闭Windows功能” —— 勾选 “适用于Linux的Windows子系统” -2、设置: -2.1、打开“设置”...

静以修身2025
昨天
2
0
init 0-6 (启动级别:init 0,1,2,3,4,5,6)

启动级别: init 0,1,2,3,4,5,6 这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下。。 0: 停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system...

圣洁之子
昨天
2
0
Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信号,经过A/D(模数转...

天王盖地虎626
昨天
2
0
聊聊Elasticsearch的ProcessProbe

序 本文主要研究一下Elasticsearch的ProcessProbe ProcessProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/process/ProcessProbe.java public class ProcessProb......

go4it
昨天
3
0
mysql PL(procedure language)流程控制语句

在MySQL中,常见的过程式SQL语句可以用在存储体中。其中包括IF语句、CASE语句、LOOP语句、WHILE语句、ITERATE语句和LEAVE语句,它们可以进行流程控制。 IF语句相当于Java中的if()...else if(...

edison_kwok
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部