jQuery从数据库填充级联下拉列表答案

【问题标题】：jQuery to populate cascading dropdown from databasejQuery从数据库填充级联下拉列表
【发布时间】：2012-06-11 12:38:42
【问题描述】：

Site here.

我正在尝试让一个表单触发数据库中另一个表单的填充。我已经对 HTML、PHP 和数据库进行了排序，但我正在努力使用 jQuery。

有人能把我引向正确的方向吗？我已经用谷歌搜索死了，但由于我不知道要搜索什么而受到了一些限制。

编辑：

以下是我遵循您的建议的内容。不幸的是，它仍然无法正常工作。

jQuery:

<script type="text/javascript">                       
$('#city').change(function(){
    var $club = $('#club');
    $club.find('option:not([value="default"])').remove(); //Remove previous items
    $.getJSON('GetClubs.php', {city:$(this).val()}, function(clubs){
        $.each(clubs, function(index, city){
            $club.append('<option value="'+city[0]+'">'+city[1]+'</option>');
        });
    });
});
</script>

HTML：

<form name="myform" action="" method="POST">
<h1>1. Choose your city</h1>
<select name="city" class="dropdown" id="city">
<option value="default" disabled="disabled" selected="selected">--- Select your option ---</option>
<?php getCities(); ?>
</select>

<h1>2. Choose your club</h1>
<select name="club" class="dropdown" id="club">
<option value="default" disabled="disabled" selected="selected">--- Select your option ---</option>
</select>
</form>

PHP：

<?php

date_default_timezone_set('Europe/London');

$day = date("l");
$time = date("G");

if ($time >= 21) {
    $day = date('l', strtotime($day .' +1 day'));
    }

$city = $_POST['city'];


if ($day == Monday) {
    $query = "SELECT name FROM nights WHERE city = '$city' ORDER BY FIELD(day, 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY')";
    }

else if ($day == Tuesday) {
    $query = "SELECT name FROM nights WHERE city = '$city' ORDER BY FIELD(day, 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY', 'MONDAY')";
    }

else if ($day == Wednesday) {
    $query = "SELECT name FROM nights WHERE city = '$city' ORDER BY FIELD(day, 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY', 'MONDAY', 'TUESDAY')";
    }

else if ($day == Thursday) {
    $query = "SELECT name FROM nights WHERE city = '$city' ORDER BY FIELD(day, 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY')";
    }

else if ($day == Friday) {
    $query = "SELECT name FROM nights WHERE city = '$city' ORDER BY FIELD(day, 'FRIDAY', 'SATURDAY', 'SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY')";
    }

else if ($day == Saturday) {
    $query = "SELECT name FROM nights WHERE city = '$city' ORDER BY FIELD(day, 'SATURDAY', 'SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY')";
    }

else if ($day == Sunday) {
    $query = "SELECT name FROM nights WHERE city = '$city' ORDER BY FIELD(day, 'SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY')";
    }

    $result = mysql_query($query);
    $items = array();

    if($result && mysql_num_rows($result) > 0) { 
        while ($row = mysql_fetch_array($result)) { 
            $items[] = array( $row[0], $row[1] );
            }         
    } 

    mysql_close(); 
    // convert into JSON format and print
    echo json_encode($items);
?>

【问题讨论】：

您的要求是根据在第一个下拉列表中选择的内容，用相关数据填充第二个下拉列表？这是要求吗？
是的，没错。因此，它会向您显示您选择的城市中的俱乐部，从今天开始按天排序。
那么下面的答案就绰绰有余了。从下面第一个答案中给出的链接中获取帮助。如需任何帮助，请在此处发布。
我已经浏览了您提供的代码并添加了它，但什么也没发生。鉴于我目前只有一个城市并且它是自动选择的，它是否仍应为 "$('#city').change(function(){" ？
默认情况下，让您的 php 代码使用默认在第一个下拉列表中选择的城市俱乐部填充第二个下拉列表。您仍然可以编写 onChange 事件。如果稍后在您的第一个下拉菜单中有更多条目，这将对您有所帮助。

标签： php jquery mysql drop-down-menu

【解决方案1】：

$('#city').change(function(){
    var $club = $('#club');
    $club.find('option:not([value="default"])').remove(); //Remove previous items
    $.getJSON('GetClubs.php', {city:$(this).val()}, function(clubs){
        $.each(clubs, function(index, city){
            $club.append('<option value="'+city[0]+'">'+city[1]+'</option>');
        });
    });
});

您还必须删除echo "<option..."。

你也应该看看mysql-real-escape-string

【讨论】：

【解决方案2】：

Check this

让你的第一个下拉菜单在“onChange”事件中调用一个 jquery 函数。在此函数中 1) 获取所选选项的值，2) 使用上面链接中的示例创建一个 ajax，如下代码所示，并将值传递给您的 GetClubs.php。

    $.getJSON('url/GetClubs.php', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('<option value="' + key + '">' + val + '</option>');
  });

  $('<select/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('#secondDropdown');
});

这个例子当然依赖于 JSON 文件的结构：

{
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}

就是这样。数据在您的第一个选择框中的值更改时填充

【讨论】：