javascript - 状态的多选列表框不显示另一个列表框中的所有城市(Php,mysql,ajax)

标签 javascript php mysql ajax listbox

选择国家/地区下拉列表会显示包含多个选项的州列表框,而无需刷新页面。但是选择 2 或 3 个州不会在另一个列表框中显示所有城市。仅显示一个州的城市。帮助

loadData.php

<?php
$q = $_GET['q'];
$con = mysqli_connect('localhost','root','','test');
if (!$con) {
  die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"test");
$sql="SELECT * FROM state WHERE country_id = '".$q."'";
$result = mysqli_query($con,$sql);
    echo "<select name='try[]' onchange='showSecondUser(this.value)' multiple>";
while($row = mysqli_fetch_array($result)){
          echo "<option value='".$row['id']."'>".$row['state_name']."</option>";
}
    echo" </select>";



$g = $_GET['g'];    
$sql="SELECT * FROM city WHERE state_id = '".$g."'";
$result = mysqli_query($con,$sql);
    echo "<select name='try' multiple>";
while($row = mysqli_fetch_array($result)){
          echo "<option value=''>".$row['city_name']."</option>";
}
    echo" </select>";

mysqli_close($con);
?>

index.php

<html>
<head>
<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","loadData.php?q="+str,true);
  xmlhttp.send();
}


function showSecondUser(str) {
  if (str=="") {
    document.getElementById("txtHint2").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint2").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","loadData.php?g="+str,true);
  xmlhttp.send();
}



</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select Country</option>
<option value="1">Australia</option>
<option value="2">Japan</option>
<option value="3">Russia</option>
<option value="4">Germany</option>
</select>
</form>
<br>
<div id="txtHint"></div>

<div id="txtHint2"></div>

</body>
</html> 

最佳答案

这是因为mysql查询错误。您在简单的等号中提供了多个数字。

应该是:

$g = $_GET['g'];    
$sql="SELECT * FROM city WHERE state_id IN (".$g.")";
$result = mysqli_query($con,$sql);

如果 $g 是逗号分隔的数字列表。 如果不是,你必须这样做。

因此,如果 $g 是一个数组,您必须对其执行 implode(),然后才能在查询中使用它

$g = $_GET['g'];    
$g = implode(',', $g);
$sql="SELECT * FROM city WHERE state_id IN (".$g.")";
$result = mysqli_query($con,$sql);

如果它是一个字符串,并且可以说数字是用空格分隔的,而不是用逗号替换空格:

$g = $_GET['g'];    
$g = str_replace(' ', ',', $g);
$sql="SELECT * FROM city WHERE state_id IN (".$g.")";
$result = mysqli_query($con,$sql);

所以在你的情况下,MySQL 查询应该是这样的:

$sql="SELECT * FROM state WHERE country_id = '".$q."'";
$result = mysqli_query($con,$sql);
    echo "<select name='try[]' onchange='showSecondUser(this)' multiple>";
    //                            there is a change here ^
    while($row = mysqli_fetch_array($result)){
       echo "<option value='".$row['id']."'>".$row['state_name']."</option>";
    }
    echo" </select>";
/*######################################################*/
$g = $_GET['g'];    
$sql="SELECT * FROM city WHERE state_id IN (".$g.")";
$result = mysqli_query($con,$sql);

JavaScript 应该是这样的:

function showSecondUser(str){
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            document.getElementById("txtHint2").innerHTML = xmlhttp.responseText;
        }
    }

    var values = new Array();
    for (var i=0; i < str.options.length; i++) {
        cur = sel.options[i];
        if (cur.selected) {
            values.push(cur.value);
        }
    }
    if (values.length) {
        values = values.join(",");
    } else {
        values = null;
    }

    xmlhttp.open("GET","loadData.php?g="+values,true);
    xmlhttp.send();
}

关于javascript - 状态的多选列表框不显示另一个列表框中的所有城市(Php,mysql,ajax),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26305937/

相关文章:

javascript - java或javascript中具有t格式转换的日期时间dd mmm yyyy hh mm ss

javascript - 如果结果已知,js 是否会跳过语句?

javascript - 使用 TweenMax 和 KineticJS 在 JavaScript 中移动贝塞尔曲线路径中的对象

javascript - 单击按钮但不打开窗口或链接 Electron

php session 不起作用

php - 提供从 Python 脚本到 PHP 的反馈

java - hibernate控制台配置在数据库连接中找不到jdbc驱动程序

php - 如果 mysqli 返回错误常量 'ER_BAD_DB_ERROR',则构建数据库

mysql - 如何使用 MySQL 合并连续的日期和时间行

php - 如何从 mysql 足球 [足球] 结果表中即时输出排名表?