javascript 更新联动下拉列表框

最新推荐文章于 2023-09-25 11:10:58 发布

原创最新推荐文章于 2023-09-25 11:10:58 发布 · 507 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javascript

本文介绍了一种在网页中实现三个下拉列表框联动的方法。当选择不同公司时，使用部门和管理部门的内容会动态更新。通过PHP后端获取部门数据，并以JSON格式传递到前端，利用jQuery监听公司选择的变化来更新部门选项。

在界面中有3个下拉列表框需要联动。

选择不同的公司后，使用部门和管理部门的内容也要进行更新。

数据来自2张表。company和department。

思路：

Department模块：

此方法输出一个部门下拉列表框：

class DepartmentModel extends Model {

    public function selectdepartment($fiedname,$current = 0,$company_id=0) {

        $res = $this->where('company_id='.$company_id)->select(); //二维数组
        $op = '<select id="'.$fiedname.'" name = "'.$fiedname.'">';
        
        $op.='<option value="0">---请选择部门---</option>';
        foreach ($res as $key => $value) {
            if ($current == $value['department_id']) {
                $op.='<option selected="selected" value = "' . $value[department_id] . '">' . $value[description] . '</option>';
            } else {
                $op.='<option value = "' . $value[department_id] . '">' . $value[description] . '</option>';
            }
        }
        $op.='</select>';
        return $op;
    }

}

控制器方法中将department的数据放到一个变量中，变量要保存成json格式。

//使用部门下拉列表框
            $department = new \Model\DepartmentModel();
            $this->assign('department',  json_encode($department->select()));

页面输出：

                    <tr><td>公司</td><td><{$selectcompany}></td></tr>
                    <tr><td>使用部门</td><td><{$userdepartment}></td></tr>
                    <tr><td>放置区域</td><td><{$selectfactoryarea}></td></tr>
                    <tr><td>管理部门</td><td><{$mandepartment}></td></tr>

动态改变下拉列表框内容：

//接收部门表的数据
            var department = <{$department}>;
            //选择不同的公司后，相应的部门下拉框也要更新
            $(function () {
                $('#company_id').change('change', function () {
                    var company_id = this.value;
                    var opstr = "<option value=0>--请选择部门--</option>";
                    for (var i = 0; i < department.length; i++) {
                        //man_department_id
                        if(company_id===department[i].company_id){
                            opstr += "<option value=" + department[i].company_id + ">" + department[i].description + "</option>";
                        }
                    }
                    //alert(opstr);
                    $('#use_department_id').html(opstr);
                    $('#man_department_id').html(opstr);
                });

标签

#jquery json #下拉框联动