Select2 下拉单自动补全

最新推荐文章于 2019-05-21 22:04:38 发布

weixin_33969116

最新推荐文章于 2019-05-21 22:04:38 发布

阅读量177

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/kt431128/blog/340901

版权

2019独角兽企业重金招聘Python工程师标准>>>

Select2 下拉单自动补全

1、下载select2所需要的js包

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

2、select2的开发新增

前台开发：

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>

修改：

$(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>