select下拉框如何动态获取后台数据 _小知识

利用select下拉框动态获取后台数据，需要利用chang事务，当下拉框选择的内容改变的时辰，利用ajax标的目的后台传输需要获得的数据类型，后台领受到请求的数据类型后，按类型要求返回响应的数据给前台，前台再将数据显示出来。下面介绍实现此功能的过程。

文章插图
方式/
1新建一个html文件，定名为test.html，利用此文件实现select下拉框的选择。在test.html页面加载jquery.min.js库文件，下面将利用jquery的ajax标的目的后台请求数据。

文章插图

2在test.html文件编写HTML代码，利用select标签界说一个下拉选择框，利用p标签界说输出数据的区域。两个标签元素都需要加上id属性，便利下面经由过程id属性找到该标签对象进行操作。

文章插图

3在test.html编写JS代码，经由过程select的id属性获得select对象，并绑定change事务，当select的下拉框改变选中的类型时，触发分歧的请求。

文章插图

4【select下拉框如何动态获取后台数据】在JS里经由过程val()方式获得select下拉框选中的类型，再经由过程jquery的ajax方式标的目的后台php文件（handle.php）请求数据。

文章插图

5

当JS中的ajax从后台当作功获得请求的数据后，在id为result的span标签输出返回的数据。这里经由过程html()方式标的目的span标签写入从后台获得的数据。

文章插图

6编写后台handle.php代码。新建一个php文件，定名为handle.php，在文件里经由过程$_POST领受ajax传递过来的数据类型，经由过程if语句判定数据类型，标的目的前台返回分歧的数据（为了测试便利，这里以文字体例代表数据，在现实中，将你的数据返回即可）。

文章插图

7在浏览器运行test.html文件，当select下拉框选择分歧类型时，返回分歧的数据。
可见，已当作功实现select下拉框选择分歧内容时，动态从后台获得数据。
代码百度网盘下载地址：
链接: https://pan.baidu.com/s/1OkIvUAywM-lAV7Sy9I7-bw 提取码: ek2n