javascript - 下拉菜单动态填充第二个下拉菜单

标签 javascript jquery html json

我有一些代码,其中第一个下拉菜单使用 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/

相关文章:

javascript - 当此值更改时,如何确保 Bootstrap 列扩展以适应其内容的宽度?

html - 为什么不同大小的文本有不同的对齐方式

html - django 将 html href 和 src 替换为 {% static %} 标签

javascript - Highstock - 在标志工具提示内插入 HTML 链接

javascript - 显示 JS 对象中字符串的格式化子字符串

javascript - React with redux - 使用 redux-form 进行 react 评级

Javascript 添加类不起作用

jquery - 清空 jQuery 中 tr 中的所有输入字段?

php - 如何在同一 php 页面上发送 Jquery Ajax 数据?

javascript - 重新创建 facebooks 帮助中心侧边栏导航