响应式绑定携带人姓名

最近做一个项目有一个携带人的功能，在这里记录一下，实现比较简单，主要是通过输入乘客名称时(成人)，携带人响应式绑定。

如果需要响应式的效果就不能用change或焦点事件了，可以选择input、keydown和keyup，用户名都会带有一个name为UserName，radio选项都有一个name为UserType
找到用户名的input并绑定上input事件，注意，input事件在UC无效

$('#pg-zxprice [name="UserType"]').parents("div").find("[name='UserName']").on("input", function (d) {
因为input是响应式的，据说借助setTimeout可以优化性能，设置60毫秒才执行，不需要每次改变就执行，在低配置电脑上有很好的表现
        setTimeout(() => {
执行获取和绑定名称的方法
GetsInputName();
        }, 60);
});

封装获取和绑定名称的方法
function GetsInputName() {
获取全部成人的radio
    let type = $('#pg-zxprice [name="UserType"][value="Adult"]').parents("form").find('[name="UserType"][value="Adult"]'),
获取全部携带人下拉框     
   select = $('#pg-zxprice [name="UserType"][value="Baby"]:checked').parents("form").find("[name='CarryPeople']"),
拼接字符串
        option;
遍历全部成人的radio
    for (var i = 0; i < type.length; i++) {
判断是否成人radio是否选上        
if ($(type[i]).prop("checked")) {
获取成人的名称
            let val = $(type[i]).parents("form.layui-field-box").find('[name="UserName"]').val().trim();
判断名称是否为空
            if (val != "") {
将成人名称绑定上
                option += '<option value="' + i + '" v-for="id in Certificate">' + val + '</option>';
            }
        }
    }
遍历携带人选项
for (var i = 0; i < select.length; i++) {
将拼接好的选项绑定上
        select[i].innerHTML = option;
这一步的目的是：如果我有两个婴儿，两个成人，婴儿A绑定成人A，婴儿B绑定成人B，那么当我成人B的名称输入错误或者其它原因想更改时，我全部的下拉框重新渲染，如果默认选项不为空，那么其它婴儿必定选择的是成人A，所以预防这种情况，给个自定义属性记录之前选择的是第几个成人，让他绑定上去（会出现某些问题）
        $(select[i]).val($(select[i]).attr("index"));
}
Layui重新渲染
    form.render('select')
}