HTML下拉框、二级联动 select多级联动

html + ajax +php 二级联动下拉框


<!DOCTYPE html>
<html>
<head>
</head>
<style>
.sel{
	width:200px;
	height:40px;
}
</style>
<body>
	<select id="sel" onchange="fun()" class="sel">
		<option value="1">支付宝</option>
		<option value="2">微信</option>
		<option value="3">QQ</option>
	</select>
	<select id="sel1" class="sel">
	</select>
</body>
<script src="/jquery.min.js"></script>
<script>
function fun(){
	var sel = document.getElementById("sel").value;
	$.ajax({
		type:'GET',
		url:'/index.php?type=get&code='+sel,
		dataType:'json',
		success:function(msg){
			var sel1 = '';
			msg.forEach(function(msg,index,array){
				sel1=sel1+'<option valu
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
级联下拉框可以通过JavaScript实现。以下是一个简单的例子: HTML代码: ```html <select id="province" onchange="updateCity()"> <option value="">请选择省份</option> <option value="江苏">江苏</option> <option value="浙江">浙江</option> </select> <select id="city" onchange="updateDistrict()"> <option value="">请选择城市</option> </select> <select id="district"> <option value="">请选择区县</option> </select> ``` JavaScript代码: ```javascript var cityData = { "江苏": ["南京", "苏州", "无锡"], "浙江": ["杭州", "宁波", "温州"] }; var districtData = { "南京": ["玄武区", "鼓楼区", "建邺区"], "苏州": ["姑苏区", "虎丘区", "吴中区"], "无锡": ["锡山区", "惠山区", "滨湖区"], "杭州": ["西湖区", "上城区", "下城区"], "宁波": ["海曙区", "江东区", "江北区"], "温州": ["鹿城区", "龙湾区", "瓯海区"] }; function updateCity() { var province = document.getElementById("province").value; var citySelect = document.getElementById("city"); var districtSelect = document.getElementById("district"); citySelect.innerHTML = "<option value=''>请选择城市</option>"; districtSelect.innerHTML = "<option value=''>请选择区县</option>"; if (province != "") { var cities = cityData[province]; for (var i = 0; i < cities.length; i++) { var option = document.createElement("option"); option.value = cities[i]; option.innerHTML = cities[i]; citySelect.appendChild(option); } } } function updateDistrict() { var province = document.getElementById("province").value; var city = document.getElementById("city").value; var districtSelect = document.getElementById("district"); districtSelect.innerHTML = "<option value=''>请选择区县</option>"; if (province != "" && city != "") { var districts = districtData[city]; for (var i = 0; i < districts.length; i++) { var option = document.createElement("option"); option.value = districts[i]; option.innerHTML = districts[i]; districtSelect.appendChild(option); } } } ``` 在这个例子中,我们定义了两个对象:cityData和districtData,分别保存了城市和区县的数据。当省份下拉框的值发生变化时,我们会根据选中的省份态生成城市下拉框的选项。同样地,当城市下拉框的值发生变化时,我们会根据选中的城市态生成区县下拉框的选项。 你可以根据自己的需求修改cityData和districtData对象,来实现更复杂的多级联下拉框效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值