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 value="'+array[index].name+'">'+array[index].value+'</option>';});document.getElementById("sel1").innerHTML = sel1;}});
}
</script>
</html>

<?php
$conn = new mysqli('localhost','select','select','select');if($_GET['type'] == 'get'){$code = $_GET['code'];$sql = "SELECT * from val WHERE name={$code}";$res = mysqli_query($conn,$sql);echo json_encode(mysqli_fetch_all($res,true));die;
}
?>

数据库

主要用到了 onchange （内容改变事件）

拿到数据 Ajax请求后端后端返回数据，，再拼接为 select下拉框的inner HTML

HTML下拉框、二级联动 select多级联动相关推荐

select下拉框二级联动
采用Layui框架两种方法实现,差别不大一.编写jsp代码二.编写后台代码(方法一) 2.1 工具类 2.2 dao层 2.3 编写对应xml 2.4 service层 2.5 serviceI ...
Select下拉框实现中国省市区三级联动
JS Select下拉框实现中国省市区三级联动联动效果以内蒙古自治区为例 distpicker.js资源获取 https://pan.baidu.com/s/1S17KyRmPfz6WYaYUV1 ...
android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...
日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...
[LayUI]下拉框二级联动
下拉框二级联动在某些应用场景我们需要用到下拉选择框联动情形. HTML: <label class="layui-form-label">公司</label&g ...
FineReport 报表数据根据下拉框的值进行数据联动
FineReport 报表数据根据下拉框的值进行数据联动,不用点击查询按钮 1.新建数据库查询,获得数据. SELECT * FROM [销量] where 地区 ='${area}' 2.把需要展示 ...
asp 下拉框二级联动
<script language = "JavaScript"> //js开始 var aaa;//定义aaa变量 aaa=0;//aaa赋0 bb = new Arr ...
vue下拉框二级联动
<html><head><meta charset="utf-8"><title>Vue 测试实例</title>< ...
HTML下拉框二级菜单
一.form表单 <div><form><div><select>//默认项为第一个<option>广州 ...
下拉框处理（select）
在UI自动化测试过程中,经常会遇到一些下拉框,我们有三种可选方式来操作下拉框. 第一种方法基于webdriver的两次click,很容易出现问题,不建议使用.(由于部分下拉框在点击一次后,失去焦点再 ...

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

HTML下拉框、二级联动 select多级联动相关推荐

最新文章

热门文章