我有一些代码,其中第一个下拉菜单使用 PHP 和 JQuery 动态填充第二个下拉菜单。
使用的代码
$('#first_choice').change(...)
在此函数内,一个 getter.php
文件使用第一个选择值从数据库加载第二个菜单的数据,如下所示:
$first_choice=$("#second-choice").load(
"getter.php?choice=" + $("#first-choice").val()
);
这个 php 页面是 json 编码的。在更改函数内有一个 .get()
函数,其中包含选择菜单 php 页面的 url、附加到第二个菜单选项的函数(数据)以及最后一个格式“json”范围。单击第一个菜单时,会调用一次更改函数来更改第二个菜单。我记得 .ajax
参数是 false。
最佳答案
当第一个下拉菜单更改时,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 - 下拉菜单动态填充第二个下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19213591/