下拉菜单动态填充第二个下拉菜单
Dropdown menu dynamically populates a second dropdown
我有一些代码,其中第一个下拉菜单使用 PHP 和 JQuery 动态填充第二个下拉菜单。
使用的代码
$('#first_choice').change(...)
在此函数中,getter.php
文件使用第一个选择值从数据库加载第二个菜单的数据,如下所示:
$first_choice=$("#second-choice").load(
"getter.php?choice=" + $("#first-choice").val()
);
这个 php 页面是 json 编码的。 在 change 函数中,有一个.get()
函数,具有选择菜单 php 页面的 url,一个附加到第二个菜单选项的函数(数据),格式为"json"作为最后一个参数。 单击第一个菜单时,调用一次更改函数以更改第二个菜单。 我记得.ajax
参数是假的。
第一个
下拉菜单更改时 ajax 第二个下拉菜单更改的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$('#first_choice').change(function(){
$.ajax({
url: "getter.php?choice=" + $(this).val()
}).done(function(data){
data = JSON.parse(data);
var html = '';
for(i=0;i<data.length;++i){
html += '<option value="'+data[i]+'">'+data[i]+'</option>';
}
$('#second-choice').html(html);
});
});
});
</script>
<style>
{padding:0;margin:0;}
</style>
</head>
<body>
<select id="first_choice">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="second-choice">
</select>
</body>
</html>
处理文件"getter.php"中的代码:
<?php
$out = array();
if(isset($_GET['choice']))
{
for($i=100;$i<10000000;$i*=10)
{
$out[] = $_GET['choice']*$i;
}
}
echo json_encode($out);
?>
相关文章:
- 第二个下拉菜单元素上的重复下拉Javascript效果
- 根据另一个下拉菜单中的选择更改第二个下拉菜单的值
- 第一个下拉菜单可自动更改第二个下拉菜单的选项
- 下拉菜单动态填充第二个下拉菜单
- 如何从 php 生成的
- 下拉菜单生成第二个 li 菜单,其中包含 javascript 或 jquery
- 第二个下拉菜单没有立即出现
- JQuery下拉菜单三个层次
- 在jQuery下拉菜单中获取第二个值
- 悬停第二个菜单后,第一个下拉菜单没有关闭
- 引导下拉菜单隐藏在第二个面板体
- jQuery下拉菜单第二次不工作
- 启用第二个下拉菜单一旦某些东西被选中在下拉菜单1
- 基于第一个下拉菜单,禁用第二个下拉菜单
- 级联下拉的第二个下拉没有填充
- 第二个下拉菜单在选择后消失
- 第一个下拉菜单选择第二个和第三个下拉菜单
- 融合表谷歌地图第二个Javascript下拉菜单不工作
- 从第二个下拉菜单中获取描述
- 如何在第一个菜单的基础上刷新第二个隐藏的下拉菜单
- 选择第一个下拉菜单后显示第二个下拉菜单的内容