弹出式窗口组件，如何实现选择后返回选择的值

Question

需求：

• 调用一个方法，弹出组件,异步加载选择菜单，选择后返回选择对应的行的数据。

• 要求返回一个JSON值，给调用的对象。

                var singleSelector = {
                    dataTableLoc:{},
                    returnData:{},
                    //弹出modal
                    open:function(){
                           $('#myModal').modal({
                             });
                           this.getData();
                    },
                    getData:function(){
                        that =this;
                    //dataTable 初始化
                    this.dataTableLoc = $('#dataTableLoc').custDataTable({
                        'ajax': '/segmentFaultTest/getloc',
                        destroy: true, //Cannot reinitialise DataTable,解决重新加载表格内容问题  
                        'bPaginate': true,
                        dataSrc:function(data){
                            //  that.returnData = data;
                            //  console.log(that.returnData)
                        },
                        "columns": [
                            {
                                "data": "loc",
                                'class': 'text-center',
                                "mRender": function (data, type, row) {
                                    return '<a onclick="singleSelector.pickLoc(\'' + data + '\',\'' + row.cameraCode + '\')" class="selectionLoc pointer" data-dismiss="modal">' + data + '</a>';
                                }
                            }
                        ]
                    });
                    },
                    pickLoc:   function(data, cameraCode) {
                        this.returnData   = {cameraCode:cameraCode,loc:data}
                       return this.returnData;
                     },
                 //地址弹出框查询事件
                search:function () {
                     this.dataTableLoc.search($('#filter').val()).draw(); 
                      this.dataTableLoc.refresh();
                      }
                }           

问题：

选择后的值不知道该存到哪里去？又或者说如何返回给调用的人？

直接retrun returnData肯定是undefined?

有想过类似日期插件，弹出选择，那也是回填到一个input框内，完成了操作。

说要调用的时候，返回这个值。不是异步的吗？感觉有点挠头。

莫非这是个伪需求？

感觉陷入迷思了，希望大家点拨一下。

Answer 1

你的需求和我写的一个日历组件的需求很相近，你应该用的是vuejs，实现起来很简单，你只需要在组件内部emit一个事件，并且传入你想暴露给外部使用组件的环境的数据就好了，接下来就是在使用组件时监听这个事件了。
286行开始。
https://gitee.com/Daniel_Deng...

Answer 2

jquery的话个人可能会这样做:

在触发弹窗选择的元素上添加一个自定义事件比如(onModalChange)
在弹窗选择数据时(或选择后点确定时)去触发自定义事件(带参数的自定义事件)参考trigger文档, 将你需要的json做为参数去触发事件.
在元素的自定义事件中获取选择的json,然后可以存入元素的data-data中备用.
后面就根据业务需要处理了...

Answer 3

选择后返回对应的值，这是异步的呀，试试Promise,

function getDate(){
    return new Promise(function(){
        ....
        //返回对应的值
       resolve(data);
    })
}
getDate().then(res=>{
    
})