前端两级联动效果

野兔IT

已于 2023-07-10 09:37:21 修改

阅读量152

点赞数

文章标签：前端 javascript

于 2023-07-10 09:35:02 首次发布

本文链接：https://blog.csdn.net/harerace/article/details/131631900

版权

该代码示例展示了一个使用HTML和JavaScript创建的联动表单。当用户在机构选择列表中做出选择时，服务选择列表会动态更新，显示与所选机构相关联的服务。这通过一个名为`servicesByOrganization`的对象实现，该对象存储了机构和服务之间的映射关系。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
  <title>联动表单</title>
</head>
<body>
  <label for="organization">选择机构:</label>
  <select id="organization" onchange="updateServices()">
    <option value="">请选择机构</option>
    <option value="1">机构1</option>
    <option value="2">机构2</option>
    <option value="3">机构3</option>
  </select>
  
  <label for="service">选择服务:</label>
  <select id="service">
    <option value="">请选择服务</option>
  </select>

  <script>
    // 定义一个包含机构和对应服务的映射关系的对象
    var servicesByOrganization = {
      "1": {
        "服务1": "值1",
        "服务2": "值2",
        "服务3": "值3"
      },
      "2": {
        "服务4": "值4",
        "服务5": "值5",
        "服务6": "值6"
      },
      "3": {
        "服务7": "值7",
        "服务8": "值8",
        "服务9": "值9"
      }
    };

    // 当机构表单变动时，更新服务表单的选项
    function updateServices() {
      var organizationSelect = document.getElementById("organization");
      var serviceSelect = document.getElementById("service");
      var selectedOrganization = organizationSelect.value;

      // 清空服务表单的选项
      serviceSelect.innerHTML = "<option value=''>请选择服务</option>";

      // 如果选择了机构，则根据选择的机构从映射关系中获取对应的服务，并添加到服务表单中
      if (selectedOrganization) {
        var services = servicesByOrganization[selectedOrganization];
        for (var serviceName in services) {
          var option = document.createElement("option");
          option.value = services[serviceName];
          option.text = serviceName;
          serviceSelect.appendChild(option);
        }
      }
    }
  </script>
</body>
</html>