本文介绍如何实现select下拉选项的联动效果，用户及部门信息一般是通过后端读取数据库返回的，用户一般都会属于某个部门，它们之间大多通过某个相同的ID进行关联，那么想当然地在前端选择用户时自然希望能够自动带出部门信息，避免多余的用户操作。

以上面的gif展示为例，要实现申请人和申请人部门的联动，必须要找到它们之间的关联，这里就是部门ID。

申请人信息中一定带有部门ID信息，我们可以在前端展现时，将申请人的部门ID信息写入到option中的data属性中，然后在js中跟踪申请人的选择改变事件，就可以获取到选中option的data值。

接着再遍历申请人部门的option元素，只要option的value值（value为申请人部门的ID）和选中申请人的部门ID相同，就设置该option为选中状态，这样就实现了自动联动申请人部门。

                     
JavaScript实现select联动
            申请人                            请选择...                          张三              李四              王二麻子                  申请人部门                    请选择...                财务部                人力部                工程部                

在demo.js定义select改变事件的处理方法update_user_dept

function update_user_dept(id) {    // 根据传参的id定位申请人select元素    var select = document.getElementById(id);    // 获取select下的所有option选项    var options = Array.from(select.options);    // 获取选中的option的data属性值，属性值为申请人所属的部门id，selectedIndex为选中的option序号    var dept_id = options[select.selectedIndex].getAttribute("data");    // 获取申请人部门select元素    var select = document.getElementById('user_dept');    // 获取select下的所有option选项    var options = Array.from(select.options);    // 遍历option    for (let i = 0; i < options.length; i++) {        // 如果option的value值和选中申请人的dept_id相同        if (options[i].value == dept_id) {            // 设置该option为选中状态            options[i].selected = true;        }    }}