当使用layui库中的lay-input组件时，如何实现输入内容变化时同步更新下拉框选项的显示值?

在layui中，当你想要在lay-input的内容变化时同步更新关联的下拉框（lay-select）选项，通常的做法是在上层表单提交或者lay-input的change事件中更新下拉框的数据源。以下是一个简单的示例：

1. 首先，创建一个lay-input和lay-select：

<input type="text" id="inputBox" lay-model="selectCity" placeholder="选择城市">
<select id="citySelect" lay-filter="cityFilter"></select>

其中`lay-model`用于关联表单字段，`lay-filter`用于指定下拉框的数据过滤器。

2. 使用JavaScript更新下拉框选项：

layui.use('form', function(){
    var form = layui.form;

    // 初始化下拉框，假设options是一个包含城市名的对象数组
    var options = ['北京', '上海', '广州', '深圳'];
    form.render({
        elem: '#citySelect',
        type: 'select',
        data: options,
        filter: {
            type: 'select',
            field: 'value', // 下拉框数据的关键字，一般对应option标签的value属性
            value: 'name', // 上级控件展示的关键词，如lay-input的value
            item: function(item){ // 格式化选项展示
                return item.name; // 这里假设citySelect的option标签有name属性
            }
        }
    });

    // 监听lay-input内容变化
    form.on('change(selectCity)', function(data){
        var inputVal = data.value; // 获取输入框的值
        // 更新下拉框的显示值，比如根据输入的城市名查找对应选项
        updateDropdownByInput(inputVal);
    });
});

// 自定义函数，根据输入框值更新下拉框
function updateDropdownByInput(inputVal){
    // 搜索options，找到匹配的选项
    var selectedOption = options.find(item => item.name === inputVal);
    if (selectedOption) {
        $('#citySelect').val(selectedOption.value); // 设置下拉框的值
    }
}

在这个例子中，当lay-input的值发生变化时，会调用`updateDropdownByInput`函数，更新下拉框的显示值。