php 实现两个select下拉框的数据联动

这是一个用于修改系统中角色权限的界面示例,通过选择不同的工厂和角色来更新权限设置。页面包含下拉菜单供用户选择相应的工厂和角色。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
 <title>role perm modify</title>
 <script language="javascript">
 function getRole(){
  document.role_perm_mod.action="";
  document.role_perm_mod.submit();
 } 
</script>
</head>

<?php
 $access_id  = "root";
 $access_pwd = "831025";
 $db_name    = "inv";
 @ $db = mysql_connect('localhost', $access_id, $access_pwd) or
  die("Could not connect to database. Please contact with IT supporting team ASAP.");
 mysql_query("SET NAMES 'GBK'");
 mysql_select_db($db_name);
?>

<body>
 <form name="myform" method="post" action="" > 
  <table cellpadding="0" cellspacing="1">
   <tr><th>Plant:</th>
    <td><select name="role_plant" onchange="javascript:getRole()">
    <?php
     echo '<option value="0">---Please Select---';
     $plants_sql = "SELECT plant_id,plant_desc FROM plant WHERE plant_act = '1' ";
     $plants_res  = mysql_query($plants_sql);
     
     $plant_sql  = "SELECT plant_id,plant_desc FROM plant WHERE plant_id='".$_POST['role_plant']."' ";
     $plant_res  = mysql_query($plant_sql);
     
     $plant_row  = mysql_fetch_array($plant_res);
     
     while($plants_row = mysql_fetch_array($plants_res)){   
      if ($plant_row['plant_id'] == $plants_row['plant_id']){
       echo '<option value="'.$plants_row['plant_id'].'" selected > '.$plants_row['plant_id'].' - '.$plants_row['plant_desc'];
      }else{
       echo '<option value="'.$plants_row['plant_id'].'" > '.$plants_row['plant_id'].' - '.$plants_row['plant_desc'];
      }
     }
    ?>
        </select>
    </td>
      </tr>
     
   <tr><th>Role:</th>
    <td><select name="role_id">
    <?php
    echo'<option value="0">---Please Select---';
    $roles_sql = "SELECT * FROM sys_role WHERE role_plant='".$_POST['role_plant']."' and role_act='1'";
    $roles_res = mysql_query($roles_sql); 
    
    $role_sql  = "SELECT * FROM sys_role WHERE role_id='".$_POST['role_id']."' and role_act='1' ";
    $role_res  = mysql_query($role_sql);
    
    $role_row  = mysql_fetch_array($role_res);
    
    while($roles_row=mysql_fetch_array($roles_res)){
     if($role_row['role_id']==$roles_row['role_id']){
      echo "<option value=".$roles_row['role_id']." selected>".$roles_row['role_id']." - ".$roles_row['role_name'];
     }else{
      echo "<option value=".$roles_row['role_id'].">".$roles_row['role_id']." - ".$roles_row['role_name'];
     }
    }    
    ?>
     </select>
    </td>
   </tr>
  </table>
    </form>
</body>
</html> 

### 实现两个 SELECT 查询的级联操作 在 ThinkPHP3.2 框架中实现两个 `SELECT` 下拉框之间的数据联动,通常涉及前端 JavaScript 和后端 PHP 的配合工作。具体来说,在用户选择第一个下拉框中的选项时,通过 AJAX 请求向服务器发送请求并获取相应的数据填充第二个下拉框。 #### 前端 HTML 部分 为了存储查询条件以及提交表单,可以使用类似于 DWZ 中定义的方式创建一个隐藏的 form 表单用于保存查询参数[^1]: ```html <form id="pagerForm" name="pagerForm" method="post"> <!-- 存储查询条件 --> </form> ``` 对于需要动态加载的数据源,则可以通过普通的 `<select>` 标签表示,并赋予特定 ID 方便后续操作: ```html <select id="firstSelect" name="firstSelect"></select> <select id="secondSelect" name="secondSelect"></select> ``` #### 后端控制器逻辑 假设存在两张关联表格分别为 `department` (部门) 和 `employee`(员工),其中每个员工属于某个具体的部门。那么可以在对应的 Action 方法里编写如下代码片段来处理来自客户端的选择事件触发的服务端响应: ```php public function getEmployeesByDepartment(){ $depId = I('get.department_id'); // 获取GET方式传递过来的部门ID if($depId){ $model = M('Employee'); // 构造查询语句, 这里的字段名请根据实际情况调整 $result = $model->where(array('department_id'=>$depId))->field('id,name')->select(); echo json_encode($result); } } ``` 此段程序会依据传入的 `$depId` 参数执行一次针对 `employee` 表的查找动作,并返回 JSON 编码的结果集给调用方。 #### 客户端交互脚本 最后一步是在页面加载完成后初始化这两个控件,并监听第一个下拉列表的变化情况以便及时更新第二项的内容。这里给出一段简单的 jQuery 范例作为参考[^2]: ```javascript $(document).ready(function() { $('#firstSelect').change(function () { var selectedValue = $(this).val(); $.ajax({ type : 'GET', url : '/index.php/Home/Index/getEmployeesByDepartment', data : {'department_id':selectedValue}, success:function(data){ var options = ''; for(var i=0;i<data.length;i++){ options += '<option value="'+data[i].id+'">'+data[i].name+'</option>'; } $("#secondSelect").empty().append(options); } }); }); }); ``` 上述代码实现了当用户改变第一个下拉菜单(`#firstSelect`)所选项目时,自动发起异步 HTTP GET 请求至指定 URL 地址;一旦接收到服务端反馈的信息体之后就立即解析成 DOM 结构追加到目标容器内完成整个流程闭环。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值