layui table 列中显示下拉框 并监听下拉框

<style type="text/css">
    * {
    padding :0px;
    margin:0px;
    }

    /* 防止下拉框的下拉列表被隐藏---必须设置--- */
    .layui-table-cell {
        overflow: visible !important;
    }
    /* 使得下拉框与单元格刚好合适 */
    td .layui-form-select {
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    }



</style>

    <div id="MainConcent">
        <div style="width:100px;margin:auto;">任务列表</div>
        <div id="tasklist"  lay-filter="tasklist">


    </div>
        
    </div>
</div>
 



<script type="text/javascript">
    $(function () {

        获取用户权限
        var Jurisdiction = "0";
        $.ajax({
            url: '../一般处理程序/DataFunction.ashx?action=GetJurisdiction',
            type: 'post',
            datatype: 'json',
            data: {},
            success: function (res) {
                var res = eval("(" + res + ")");
                Jurisdiction = res.Jurisdiction;
            }
        })

        //table加载
        layui.use('table', function () {
            var table = layui.table;
            //var form = layui.form;
             var name=  '@ViewBag.Name'
            table.render({
                elem: '#tasklist'
                , url: '../Myself/GetTaskList'
                , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    , groups: 1 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页
                    , curr: 1//重新从第一页开始
                },
                title:'任务列表',
                limits: [10, 20, 50]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
                , limit: 10
                , height: 490
                , cols: [[
                    { field: 'ID', width: 80, title: 'ID', sort: true, align: 'center' }
                    , { field: 'ProjectName', title: '项目名称', minWidth: 150, align: 'center' ,sort: true }
                    , { field: 'TaskName', title: '任务名称', minWidth: 150, align: 'center' }
                    , {
                        field: 'TaskState', title: '任务状态', width: 100, align: 'center',

                        templet: function (table) {
                            switch (table.TaskState) {

                                case "Open":
                                    return '  <select name="' + table.ID + '"  style="text-align:center" id=TaskStateID lay-filter="TaskStateID">' +
                                        '  <option value= "Open" selected="selected"> Open</option >' +
                                        '  <option value="Ongoing">Ongoing</option>' +
                                        '  <option value="Closed">Closed</option>' +
                                        '  <option value="Cancel">Cancel</option>' +
                                        '  <option value="Delay">Delay</option>' +
                                        '  </select >';
                                    break;
                                case "Ongoing":
                                    return ' <select name="' + table.ID + '"  style="text-align:center" id=TaskStateID lay-filter="TaskStateID">' +
                                        '  <option value= "Open" > Open</option >' +
                                        '  <option value="Ongoing" selected="selected">Ongoing</option>' +
                                        '  <option value="Closed">Closed</option>' +
                                        '  <option value="Cancel">Cancel</option>' +
                                        '  <option value="Delay">Delay</option>' +
                                        '  </select >';
                                    break;

                                case "Closed":
                                    return '  <select name="' + table.ID + '"  style="text-align:center" id=TaskStateID lay-filter="TaskStateID">' +
                                        '  <option value= "Open" > Open</option >' +
                                        '  <option value="Ongoing">Ongoing</option>' +
                                        '  <option value="Closed" selected="selected">Closed</option>' +
                                        '  <option value="Cancel">Cancel</option>' +
                                        '  <option value="Delay">Delay</option>' +
                                        '  </select >';
                                    break;
                                case "Cancel":
                                    return '   <select name="' + table.ID + '"  style="text-align:center" id=TaskStateID lay-filter="TaskStateID">' +
                                        '  <option value= "Open" > Open</option >' +
                                        '  <option value="Ongoing">Ongoing</option>' +
                                        '  <option value="Closed">Closed</option>' +
                                        '  <option value="Cancel" selected="selected">Cancel</option>' +
                                        '  <option value="Delay">Delay</option>' +
                                        '  </select >';
                                    break;
                                default:
                                    return '   <select name="' + table.ID + '"  style="text-align:center" id=TaskStateID lay-filter="TaskStateID">' +
                                        '  <option value= "Open" > Open</option >' +
                                        '  <option value="Ongoing">Ongoing</option>' +
                                        '  <option value="Closed">Closed</option>' +
                                        '  <option value="Cancel">Cancel</option>' +
                                        '  <option value="Delay" selected="selected">Delay</option>' +
                                        '  </select >';
                                    break;


                            }
                        }
                    }
                    , { field: 'TaskPlanStartTime', width: 180, title: '计划任务开始时间', sort: true, align: 'center' }
                    , { field: 'TaskPlanEndTime', width: 180, title: '计划任务结束时间', align: 'center' }
                   
                    //, { field: 'TaskStartTime', width: 80, title: '任务实际开始时间', sort: true }
                    //, { field: 'TaskFinishTime', width: 80, title: '任务实际完成时间', sort: true }
                    , { field: 'TaskTime', width: 80, title: '时间', align: 'center' }
                    , { field: 'Priority', width: 80, title: '优先级', align: 'center', edit: 'text' }
                    , { field: 'Overdued', width: 80, title: '逾期', align: 'center', edit: 'text' }
                    , { field: 'TaskAnthor', width: 120, title: '任务负责人', sort: true, align: 'center' }
                    //, { field: 'TaskDistribution', width: 135, title: '任务提出者', sort: true, align: 'center' }
                ]],
                where: { TaskAnthor: name },

            });


            var form = layui.form;
            var table = layui.table;
            ///项目状态下拉框值监听
            form.on('select(TaskStateID)', function (data) {
               
                if (Jurisdiction == "0") {

                    alert("无此权限！");
                    table.reload('tasklist',
                        {
                            page: {//page参数是指重新刷新后从第几页开始
                                curr: 1 //重新从第 1 页开始
                            }
                        })
                    return;
                }

                var val = data.value;
                var ID = data.elem.name;
                console.log(ID)
                console.log(val)
                $.ajax({
                    url: '../一般处理程序/Datafunction.ashx?action=UpdateTaskState',
                    type: 'post',
                    datatype: 'json',
                    data: { ID: ID, State: val },
                    success: function (res) {
                        var res = eval("(" + res + ")");
                        if (res.IsTrue) {
                            alert("状态修改成功！")

                            table.reload('tasklist',
                                {
                                    page: {//page参数是指重新刷新后从第几页开始
                                        curr: 1 //重新从第 1 页开始
                                    }
                                })
                        }
                        else {
                            alert(res.msg);
                        }

                    }

                })
            })
    })


</script>