JQuery Plugin—select2

1. 引用相关资源

<!--引入下拉框的样式  -->
<link rel="stylesheet" href="${webRoot}/plug-in/select2/css/select2.min.css" type="text/css"></link>
<!-- 引入下拉框的逻辑 -->
<script type="text/javascript" src="${webRoot}/plug-in/select2/js/select2.min.js"></script>
<!-- 引用国际化语言 中文 -->
<script type="text/javascript" src="${webRoot}/plug-in/select2/js/i18n/zh-CN.js"></script>

2. 新增行的下拉框列表

<table style="display: none" id="knockTable">
<tr>
...
	<td style="text-align: center; vertical-align: middle;border-right-style: solid;border-right-color: darkgray;border-right-width: 1px;position: relative;">
	       <select id='workNo' name="workNo" class='form-control input-sm' datatype="*"  ignore="checked" nullmsg='请选择飞行人员'>
	            <option value="">请选择飞行人员</option>
	        </select>
	    <input type="hidden" id="pilotName" name="pilotName"/>
	</td>
...
</tr>
...
</table>

3. 新增行按钮

function addParts() {
    var _html = $('#knockTable tbody').html();
    var num = $("#tPartsList tbody tr").size();
    if (num>9) {
        top.layer.msg("每次最多新增10张证书", {
            icon: 2,
            time: 2000 //2秒关闭（如果不配置，默认是3秒）
        });
        return;
    }
    $("#tPartsList tbody").append(_html);
    // 给每行的编号赋值
    getPartsNum([],false);
    // 给每行的select或input绑定事件
    bindEvent();
}

4. 给每行的select或input绑定事件

function bindEvent() {
	var $tr = $("#tPartsList tbody tr:last");
    //航空公司选中事件
    $tr.find('td').eq(1).find("select[name='clientName']").change(function () {
        var value = $(this).val();
        var reultTr = $(this).parents("tr").find('td').eq(3);
        // 切换航空公司，清空飞行员的姓名
        reultTr.find("select[name='workNo']").val([]).trigger('change'); 
    })
    // 绑定飞行员的远程搜索数据
    $tr.find('td').eq(3).find("select[name='workNo']").select2({
        ajax:{
            url : "/rest/tTrScheduleController/queryTrainPerson",
            dataType : 'json',
            type : 'post',
            data : function (params) {
                let customerId = $tr.find('td').eq(1).find("select[name='clientName']").val()
                console.log('customerId',customerId)
                console.log('params',params)
                return {
                    customerId:customerId,    // 航空公司Id
                    userName : params.term    //接收搜索框输入的姓名
                };
            },
            processResults: function (data) {        //data返回数据
                var options = new Array();
                console.log(data)
                $(data.obj).each(function (i, o) {
                    options.push({              //获取select2个必要的字段，id与text
                        id : o.pCode,         //取出items中pCode赋值给id
                        text : o.cnName    //取出items中cnName   赋值给text
                    });
                });
                return {
                    results: options        //返回数据
                };
            },
            cache: true
        },
        placeholder: "请选择飞行人员"
    })
    // 飞行员选中事件
    $tr.find('td').eq(3).find("select[name='workNo']").on("select2:select",function(e){
        var pilotName = e.params.data.text;
        // 把选中的值赋值给 隐藏的input框，用于表单提交 
        $tr.find("input[name='pilotName']").val(pilotName);
    })
 }