如何使用jQuery在PHP中创建级联下拉列表
[英]How to make a Cascading Drop Down List in PHP using jQuery
问题描述
我的数据库包含国家和城市。
第一种情况-成功完成：
- 国家列表在页面加载的下拉框中填充
- 城市列表将在页面加载的下拉框中填充-填充的城市列表基于默认国家/地区。
第二种情况-无法成功：
- 用户更改国家
- 城市列表将根据所选国家/地区更改
我知道我必须使用jQuery / Ajax。 我尝试过，但是由于缺乏编程经验，我无法解决问题。 我的列表是从数据库而不是XML获取的。 我只需要一个快速的解决方案，我就需要保持简单和愚蠢。
我正在使用常规的PHP编码样式，而不是面向对象的。
我该怎么做？ 任何相关资源将不胜感激。
4 个解决方案
解决方案1
6 已采纳 2011-07-28 10:36:08
$("#country").change(function(){
$('#city').find('option').remove().end(); //clear the city ddl
var country = $(this).find("option:selected").text();
alert(country);
//do the ajax call
$.ajax({
url:'getCity.php'
type:'GET',
data:{city:country},
dataType:'json',
cache:false,
success:function(data){
data=JSON.parse(data); //no need if dataType is set to json
var ddl = document.getElementById('city');
for(var c=0;c<obj.length;c++)
{
var option = document.createElement('option');
option.value = obj[c];
option.text = obj[c];
ddl.appendChild(option);
}
},
error:function(jxhr){
alert(jxhr.responseText);
}
});
});
在您的getCity.php中
$country = $_GET['city'];
//do the db query here
$query = "your query";
$result = mysql_query($query);
$temp = array();
while ($row = mysql_fetch_assoc($result)) {
if(empty($temp))
{
$temp=array($row['city']);
}
else
{
array_push($temp,$row['city']);
}
}
echo (json_encode($temp));
解决方案2
1 2011-07-28 10:16:41
您可以通过使用jquery的.change()方法对选择框值的更改进行ajax调用来.change() 。 api.jquery.com/change/
解决方案3
0 2013-04-18 11:26:15
写数据而不是obj。 它工作得很好
解决方案4
0 2019-09-11 19:59:15
index.php
<?php require_once './db.php'; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>StackOverFlow</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"> </script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="text/javascript" src="app.js"></script> </head> <body> <?php // In this part of the code i'm building the select box options $sql = "SELECT thana FROM locations group by thana"; $stmt = $conn->prepare($sql); $stmt->execute(); ?> <select name="Thana" class="thana-select-box"> <option></option> <?php while ($row = $stmt->fetch()){ ?> <option value="<?=$row['thana']?>"><?=$row['thana']?></option> <?php } ?> </select> <select name="Area" class="area-select-box"> </select> </body> </html>
db.php
<?php $username = 'your username'; $password = 'your password'; $host = 'localhost'; $dbname = 'test'; $conn = new PDO("mysql:host=$host;dbname=$dbname",$username, $password , array( PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_PERSISTENT => false, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC ));
get_options.php
<?php require_once 'db.php'; $thana = $_REQUEST['thana']; $sql = "SELECT area FROM locations where thana='$thana'"; $stmt = $conn->prepare($sql); $stmt->execute(); $options = []; while ($row = $stmt->fetch()){ $options[] = $row['area']; } echo json_encode($options);
app.js：
$(document).ready( function(){ $(document).on('change', '.thana-select-box', function(e){ let fd = new FormData(); let thana = $(this).val(); fd.append('thana', thana); // In this part of the code according to the selected thana, we are going to fetch // the rows from the second table Area, the php will return a json structure that contains the rows // or more with the Area that belong to thana. $.ajax({ url: "get_options.php", type: "POST", data: fd, processData: false, contentType: false, complete: function (results) { try { let str = JSON.parse(results.responseText); updateDOM(str); console.log(str) } catch (e) { console.error(e.message); } }, }); }); updateDOM = (options) => { let areaSelectBox = $('.area-select-box'); let options_dom = ''; options.map((value)=>{ options_dom += `<option value="${value}">${value}</option>`; }); areaSelectBox.html (''); areaSelectBox.append(options_dom); }; });
如何使用 Jquery 使下拉列表依赖于 laravel 中的另一个下拉列表？
[英]how to make drop-down list dependent form another drop-down list in laravel using Jquery?
如何在PHP的级联下拉菜单中应用Javascript（无AJAX）
[英]How to apply Javascript in cascading drop down in PHP(no AJAX )
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.