javascript 更新联动下拉列表框

在界面中有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);                });