下拉框两级连动

我这个也是在网上看到的二级连动。个人认为挺不错的。

只要将下面代码修改一下就可以使用的。

<!--大类的下拉列表框,它的onChange事件执行ShowSubType函数显示子类项-->
<select name="TypeID" id="TypeID" onChange="JavaScript:ShowSubType(this.options[this.selectedIndex].tag)">
<option value="">选择大类</option>
    <%
     Dim RecordCount,BTypeArr
     Rs.Open "Select TypeName,TypeID from BType",Conn,1,1   '查询大类表,获取大类名和ID
     RecordCount=Rs.RecordCount
     If RecordCount>0 Then
      '定义一个数组,用来存放子类名
      Redim BTypeArr(RecordCount-1)
      For i=0 To RecordCount-1
  '查询每个大类所包含的小类名及小类的ID号
       SqlStr="Select SubTypeID,SubTypeName From SubType Where TypeID=" & Rs("TypeID")
       Rs1.Open SqlStr,Conn
       'BTypeArr(i)="<option value=''>选择小类</option>"
       While Not Rs1.Eof
  '小类名及小类的ID号按下拉列表框的数据格式连接并放入数组
        BTypeArr(i)=BTypeArr(i) & "<option value='" & Rs1("SubTypeID") & "'>" & Rs1("SubTypeName") & "</option>"
        Rs1.MoveNext
       Wend
       Rs1.Close
    %>
    <!--大类列表写入下拉列表框-->
    <option value="<%=Rs("TypeID")%>" tag=<%=i%>><%=Rs("TypeName")%></option>
    <%
       Rs.MoveNext
      Next
     End If
     Rs.Close
    %>
     </select>
    
     <select name="SubTypeID">
                <option value="">选择小类</option>
     </select>

<!--生成脚本控制子类的动态改变-->
<%If RecordCount>0 Then%>
<script language="JavaScript">
//JavaScript中定义数组
var BTypeArr=new Array();
<%
  '将子类的数据写入数组
  For i=0 To RecordCount-1
%>
   BTypeArr[<%=i%>]="<%=BTypeArr(i)%>";
<%
  Next
%>
<!--改变大类时显示子类的脚本函数-->
function ShowSubType(Index)
{
  document.frmSearch.SubTypeID.outerHTML="<select name='SubTypeID'><option value=''>选择小类</option>" + BTypeArr[Index] + "</select>";
}
</script>
<%End If%> 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下拉框二级联动数据库的实现需要前端和后端的配合,前端需要通过JavaScript监听第一个下拉框的变化事件,然后向后端发送Ajax请求获取第二个下拉框的数据。后端需要提供两个接口,一个用于获取第一个下拉框的数据,另一个用于根据第一个下拉框的选择值获取第二个下拉框的数据。 以下是一个简单的实现思路: 1.前端代码: ```html <!-- 第一个下拉框 --> <select id="building"> <option value="">请选择公寓</option> <!-- 动态添加选项 --> </select> <!-- 第二个下拉框 --> <select id="dormitory"> <option value="">请选择宿舍</option> <!-- 动态添加选项 --> </select> <script> // 监听第一个下拉框的变化事件 document.getElementById('building').addEventListener('change', function() { // 获取选择的值 var buildingId = this.value; // 发送Ajax请求获取第二个下拉框的数据 var xhr = new XMLHttpRequest(); xhr.open('GET', '/findAllDormitory?buildingId=' + buildingId); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 解析返回的数据 var dormitories = JSON.parse(xhr.responseText); // 清空第二个下拉框的选项 var dormitorySelect = document.getElementById('dormitory'); dormitorySelect.innerHTML = '<option value="">请选择宿舍</option>'; // 动态添加选项 dormitories.forEach(function(dormitory) { var option = document.createElement('option'); option.value = dormitory.dormitoryId; option.textContent = dormitory.dormitoryName; dormitorySelect.appendChild(option); }); } }; xhr.send(); }); </script> ``` 2.后端代码: ```python # 定义两个接口 @app.route('/findAllBuilding') def find_all_building(): # 查询公寓表获取数据 buildings = Building.query.all() # 将数据转换为字典列表 building_list = [{'buildingId': building.buildingId, 'buildingName': building.buildingName} for building in buildings] # 返回数据 return jsonify(building_list) @app.route('/findAllDormitory') def find_all_dormitory(): # 获取一级下拉框的选择值 building_id = request.args.get('buildingId') # 根据选择值查询宿舍表获取数据 dormitories = Dormitory.query.filter_by(buildingId=building_id).all() # 将数据转换为字典列表 dormitory_list = [{'dormitoryId': dormitory.dormitoryId, 'dormitoryName': dormitory.dormitoryName} for dormitory in dormitories] # 返回数据 return jsonify(dormitory_list) ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值