手册

https://select2.org/getting-started/basic-usage
http://select2.github.io/select2/

http://video.tudou.com/v/XMjgyNjg2OTE0OA==.html?spm=a2h0k.8191414.0.0&from=s1.8-1-1.2

插件下载地址:
链接：https://pan.baidu.com/s/1XV9DOzZX3zgqKOUnvPaJ7Q 密码：gnv2

思路

1. 预加载select2的js样式
2. onchange获取select框里的数据后发送ajax
3. 控制器处理好后返回结果.
4. 如果是ecshop搜索后返回的页面,替换整个页面,需要改写call方法为JQuery的ajax,添加成品与半成品的对应关系 时需要把事件绑定到document上才能抓到页面的元素

1. 如果是自己写的ajax这样就可以了.

html里

<link href="../../js/select2/select2.css" rel="stylesheet" />
<script src="../../js/select2/select2.js"></script><div class="select2div"></div><select  class="js-example-basic-multiple add_semi_sn_relate" name="sn_type[]" sn_id="{$sn.id}" multiple="multiple"> {foreach from=$semi_sninfo item=v}<option value="{$v.sn}" {if in_array($v.sn,$sn['semi_sn_arr'])}selected="selected"{/if} >{$v.sn_name}</option> {/foreach}            <!--  <option value="111" >111</option> <option value="222" >2222</option> <option value="333" >333</option>  --></select>
<script type="text/javascript">
$(document).ready(function() {$(".add_semi_sn_relate").select2(); //预加载select2效果//添加成品与半成品的对应关系 添加对应关系时需要把事件绑定到document上才能抓到页面的元素
$(document).on("change",'.add_semi_sn_relate',function() { var sns = $(this).val(); //当option里的值改变时获取它里的值,如果有多个,会获取到以,号隔开的值var sn_id = $(this).attr('sn_id');var url = 'product_sn.php?act=select2addGoodsRelate&sns=' + sns + '&sn_id=' + sn_id;// return false;$.get(url,function(data,status){var data = data;// return false;var data = JSON.parse(data);if(data.code>0){alert(data.msg);}else{// alert(data.msg);// listTable.loadList();}});
});
</script>

控制器里

elseif ($_REQUEST['act'] == 'select2addGoodsRelate')
{$sns = empty($_REQUEST['sns']) ? '' : trim($_REQUEST['sns']);if($sns=='null'){$sns = '';}$sn_id = empty($_REQUEST['sn_id']) ? '' : trim($_REQUEST['sn_id']);$sql = "UPDATE wdm_product_sn SET semi_sn = '".$sns."' WHERE id = $sn_id";  wdmlog('第'.__LINE__.'行','product_sn','select2addGoodsRelate');wdmlog($sql,'product_sn','select2addGoodsRelate');$db->query($sql);  $ret['code']=0;$ret['msg']= '添加成功';echo json_encode($ret,JSON_UNESCAPED_UNICODE);die;
}

2. 如果是ecshop里,需要改写call方法为JQuery的ajax方法,才可以select2需要JQuery支持,ecshop原生的call与JQuery冲突.表格上面的搜索和下面翻页需要改写

pageheader_list.htm头页面里引入jquery.listtable.js

把 pageheader.htm复制一份改为pageheader_list.htm
在pageheader_list.htm里删除listtable.js引入jquery.listtable.js

D:\phpStudy\WWW\work\wdm\trunk\www.wdmcake.cn\www\admin\templates\pageheader_list.htm
{insert_scripts files="../admin/js/jquery.listtable.js"}

product_sn_list.htm页面引入jquery-1.11.1.min.js

D:\phpStudy\WWW\work\wdm\trunk\www.wdmcake.cn\www\admin\templates\product_sn_list.htm

jquery.listtable.js下载地址
链接：https://pan.baidu.com/s/1CYXvzW4WFRkygkx8q5x48w 提取码：vlrx

{include file="pageheader_list.htm"}
{insert_scripts files="../js/utils.js}
<!--  这里指的是引入的根目录下的/js/test.js -->
{insert_scripts files="../admin/js/validator.js,jquery-1.11.1.min.js"}<link href="../../js/select2/select2.css" rel="stylesheet" />
<script src="../../js/select2/select2.js"></script><form action="javascript:searchproduct();" name="addForm"  id="addForm"><!-- 分类 -->选择城市<select name="city" id="city" onchange="get_city();"><option value="-1">所在城市</option>{html_options options=$goods_city}</select><select name="sn_gid" id="sn_gid" onchange="get_products();" style="width:135px;"><option value="0">请选择商品</option>{foreach from=$goods_list item=goods}<option value="{$goods.goods_id}">{$goods.goods_sn}  {$goods.goods_name}</option>{/foreach}</select><!-- 商品:<input type="text" name="sn_name" value="" size="12" /> --><select name="sn_pid" id="sn_pid"><option value="0">请选择规格</option>{foreach from=$products item=product}<option value="{$product.product_id}">{$product.product_name}</option>{/foreach}</select><select name="sn_pizi" id="sn_pizi"><option value="0">请选择坯子</option>{foreach from=$pizi_list item=pizi}<option value="{$pizi.title}">{$pizi.title}</option>{/foreach}</select><!-- sn_type --><input type="hidden" name="sn_type" id="sn_type" value="1" size="15" /><!-- 半成品品号 --><input type="hidden" name="semi_sn" value="" size="5" /><!-- 半成品品名 --><input type="hidden" name="sn_name" value="" size="5" />成品品号<input type="text" name="sn_sn" value="" size="15" /><!-- 新货品 --><input type="hidden" name="sn_newsn" value="" size="5" />货品价格<input type="text" name="sn_price" value="" size="5" /><input type="button" value="添加成品" class="button" onclick="add_sn();" /><input type="submit" value="搜索" class="button"/></form><script type="text/javascript">
function searchproduct()
{//拿到表单里需要的值listTable.filter.gid = document.forms['addForm'].elements['sn_gid'].value;listTable.filter.pizi = document.forms['addForm'].elements['sn_pizi'].value;listTable.filter.sn = document.forms['addForm'].elements['sn_sn'].value;listTable.filter.newsn = document.forms['addForm'].elements['sn_newsn'].value;listTable.filter.sn_price = document.forms['addForm'].elements['sn_price'].value;listTable.filter.sn_name = document.forms['addForm'].elements['sn_name'].value;listTable.filter.goods_city = document.forms['addForm'].elements['city'].value;listTable.loadList(); //调用jquery.listtable.js里的listTable.loadList()方法发送ajax
}
//在ajax的成功里改写listTable.listCallback
listTable.listCallback = function(result, txt)
{if (result.error > 0){alert(result.message);}else{try{document.getElementById('listDiv').innerHTML = result.content;if (typeof result.filter == "object"){listTable.filter = result.filter;}listTable.pageCount = result.page_count;$(".add_semi_sn_relate").select2();}catch (e){alert(e.message);}}
}
</script>

jquery.listtable.js里

D:\phpStudy\WWW\work\wdm\trunk\www.wdmcake.cn\www\admin\js\jquery.listtable.js

/*** 载入列表*/
listTable.loadList = function()
{var args = "act="+this.query+"" + this.compileFilter();$.ajax({type:"POST",url:listTable.url,data:args ,dataType:"json",success:this.listCallback});}