如何基于另一个下拉框的选择更新目标下拉框内容

针对你的需求，提供两种实用方案，可根据数据量大小选择：

方案1：前端预加载所有数据（适合小数据量） #

页面加载时从数据库取出所有企业和对应产品项，存储在JS对象中，监听企业下拉框的变化事件，动态渲染产品项下拉框。

完整代码示例 #

<%
' 初始化数据库连接
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open "Provider=SQLOLEDB;Data Source=你的数据库服务器;Initial Catalog=你的数据库名;User ID=账号;Password=密码;"

' 渲染Principal下拉框
Set rsPrincipal = conn.Execute("SELECT DISTINCT PrincipalID, PrincipalName FROM Principals ORDER BY PrincipalName")
%>
<select id="principalSelect">
  <option value="">请选择企业</option>
  <% Do While Not rsPrincipal.EOF %>
    <option value="<%= rsPrincipal("PrincipalID") %>"><%= rsPrincipal("PrincipalName") %></option>
  <% rsPrincipal.MoveNext Loop %>
</select>

<select id="descriptionSelect">
  <option value="">请选择产品项</option>
</select>

<%
' 取出所有产品项，按PrincipalID分组输出为JS对象
Set rsProducts = conn.Execute("SELECT PrincipalID, ProductID, Description FROM Products ORDER BY Description")
%>
<script>
// 预存产品数据，键为PrincipalID，值为产品数组
const productMap = {};
<% Do While Not rsProducts.EOF %>
  const pid = '<%= rsProducts("PrincipalID") %>';
  const product = {
    id: '<%= rsProducts("ProductID") %>',
    desc: '<%= Server.HTMLEncode(rsProducts("Description")) %>'
  };
  if (!productMap[pid]) productMap[pid] = [];
  productMap[pid].push(product);
<% rsProducts.MoveNext Loop %>

// 监听企业下拉框变化
document.getElementById('principalSelect').addEventListener('change', function() {
  const selectedPid = this.value;
  const descSelect = document.getElementById('descriptionSelect');
  
  // 清空现有选项
  descSelect.innerHTML = '<option value="">请选择产品项</option>';
  
  // 填充对应产品项
  if (selectedPid && productMap[selectedPid]) {
    productMap[selectedPid].forEach(p => {
      const opt = document.createElement('option');
      opt.value = p.id;
      opt.textContent = p.desc;
      descSelect.appendChild(opt);
    });
  }
});
</script>
<%
' 释放资源
rsPrincipal.Close: Set rsPrincipal = Nothing
rsProducts.Close: Set rsProducts = Nothing
conn.Close: Set conn = Nothing
%>

方案特点 #

• 优点：无额外网络请求，响应快，无需额外后端接口
• 缺点：若产品数据量极大，会增加页面初始加载时间

方案2：AJAX动态请求后端接口（适合大数据量） #

每次选择企业时，通过AJAX请求后端ASP接口，获取该企业对应的产品项后再渲染下拉框。

步骤1：创建后端接口页面（getProducts.asp） #

<%@ Language=VBScript %>
<%
Response.ContentType = "application/json"
Dim principalId
principalId = Request.QueryString("principalId")

' 数据库连接
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open "Provider=SQLOLEDB;Data Source=你的数据库服务器;Initial Catalog=你的数据库名;User ID=账号;Password=密码;"

' 参数化查询防止SQL注入
Set cmd = Server.CreateObject("ADODB.Command")
cmd.ActiveConnection = conn
cmd.CommandText = "SELECT ProductID, Description FROM Products WHERE PrincipalID = ? ORDER BY Description"
' 注意：参数类型和长度要匹配你的数据库字段，这里示例用adVarChar(50)
cmd.Parameters.Append cmd.CreateParameter("@PrincipalID", 200, 1, 50, principalId)

Set rs = cmd.Execute
' 拼接JSON响应
Dim jsonStr
jsonStr = "["
Do While Not rs.EOF
  Dim item
  item = "{""id"":""" & rs("ProductID") & """,""desc"":""" & Replace(rs("Description"), """", "\""") & """}"
  If jsonStr <> "[" Then jsonStr = jsonStr & ","
  jsonStr = jsonStr & item
  rs.MoveNext
Loop
jsonStr = jsonStr & "]"

Response.Write jsonStr

' 释放资源
rs.Close: Set rs = Nothing
cmd.ActiveConnection.Close: Set cmd = Nothing
conn.Close: Set conn = Nothing
%>

步骤2：前端页面代码 #

<%
' 渲染Principal下拉框
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open "Provider=SQLOLEDB;Data Source=你的数据库服务器;Initial Catalog=你的数据库名;User ID=账号;Password=密码;"
Set rsPrincipal = conn.Execute("SELECT DISTINCT PrincipalID, PrincipalName FROM Principals ORDER BY PrincipalName")
%>
<select id="principalSelect">
  <option value="">请选择企业</option>
  <% Do While Not rsPrincipal.EOF %>
    <option value="<%= rsPrincipal("PrincipalID") %>"><%= rsPrincipal("PrincipalName") %></option>
  <% rsPrincipal.MoveNext Loop %>
</select>

<select id="descriptionSelect">
  <option value="">请选择产品项</option>
</select>

<script>
document.getElementById('principalSelect').addEventListener('change', function() {
  const selectedPid = this.value;
  const descSelect = document.getElementById('descriptionSelect');
  
  descSelect.innerHTML = '<option value="">加载中...</option>';
  
  if (!selectedPid) {
    descSelect.innerHTML = '<option value="">请选择产品项</option>';
    return;
  }
  
  // 发送AJAX请求
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'getProducts.asp?principalId=' + encodeURIComponent(selectedPid), true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      try {
        const products = JSON.parse(xhr.responseText);
        descSelect.innerHTML = '<option value="">请选择产品项</option>';
        products.forEach(p => {
          const opt = document.createElement('option');
          opt.value = p.id;
          opt.textContent = p.desc;
          descSelect.appendChild(opt);
        });
      } catch (e) {
        descSelect.innerHTML = '<option value="">加载失败</option>';
      }
    } else {
      descSelect.innerHTML = '<option value="">加载失败</option>';
    }
  };
  xhr.onerror = function() {
    descSelect.innerHTML = '<option value="">加载失败</option>';
  };
  xhr.send();
});
</script>
<%
rsPrincipal.Close: Set rsPrincipal = Nothing
conn.Close: Set conn = Nothing
%>

方案特点 #

• 优点：页面初始加载快，适合大量产品数据场景
• 缺点：每次切换企业都需发送网络请求，需注意SQL注入防护（已用参数化查询）

注意事项 #

• 替换代码中的数据库连接字符串为你实际的配置
• 确保数据库字段名（如PrincipalID、Description）与你的表结构一致
• 方案2中JSON拼接时，用Replace(rs("Description"), """", "\""")转义双引号，避免JSON格式错误
• 可根据需求添加加载状态提示，提升用户体验

内容的提问来源于stack exchange，提问作者kingklick