如何在php bootstrap modal中使用依赖下拉列表？
作者：互联网
我想在引导程序模式中实现下拉列表.
我已经有一个演示代码,但是我不知道如何在引导程序模式中实现它.
在引导模态表单中,将打开带有2个从属下拉列表的表单,提交后,值将保存到数据库中.
非常感谢.
index.php
<!DOCTYPE html>
<html>
<head>
<title>PHP - dependent dropdown list</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Select State and get bellow Related City</div>
<div class="panel-body">
<div class="form-group">
<label for="title">Select State:</label>
<select name="state" class="form-control">
<option value="">--- Select State ---</option>
<?php
require('db_config.php');
$sql = "SELECT * FROM demo_state";
$result = $mysqli->query($sql);
while($row = $result->fetch_assoc()){
echo "<option value='".$row['id']."'>".$row['name']."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label for="title">Select City:</label>
<select name="city" class="form-control" style="width:350px">
</select>
</div>
</div>
</div>
</div>
<script>
$( "select[name='state']" ).change(function () {
var stateID = $(this).val();
if(stateID) {
$.ajax({
url: "ajaxpro.php",
dataType: 'Json',
data: {'id':stateID},
success: function(data) {
$('select[name="city"]').empty();
$.each(data, function(key, value) {
$('select[name="city"]').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}else{
$('select[name="city"]').empty();
}
});
</script>
</body>
</html>
ajaxpro.php
<?php
require('db_config.php');
$sql = "SELECT * FROM demo_cities
WHERE state_id LIKE '%".$_GET['id']."%'";
$result = $mysqli->query($sql);
$json = [];
while($row = $result->fetch_assoc()){
$json[$row['id']] = $row['name'];
}
echo json_encode($json);
?>
请帮助我..非常感谢.
解决方法:
index.php
<?php
include("db/db.php");
$select_country = "SELECT country_id,country_name from country";
$result_country = mysqli_query($con,$select_country);
?>
<!DOCTYPE html>
<html>
<head>
<title>ADDRESS FORM</title>
<script type="text/javascript" src="js/jquery.3.2.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript">
$(document).on("click","#reg",function(){
$(".modal-title").html("Registration Form");
$("#myModal").modal({backdrop: "static", keyboard: false});
});
$(document).on("click","#adddata",function(e){
var state = parseInt($("#selectstate").val());
var country = parseInt($("#selectcountry").val());
console.log(state+country);
$.ajax({
type : 'POST',
url : 'insert_all.php?action=ins_std',
data : {'state': state,'country' : country},
dataType : "JSON",
success:function(feedback){
if(feedback=="yes"){
$(".alert2").html("<b style='color:green;'>Recored Successfully Added </b>");
$("#std-form")[0].reset();
$("#myModal").modal('hide');
$(".has-error").removeClass("has-error");
$(".alert2").show().delay(5000).fadeOut();
} else{
$("#alert").show();
$(".alert1").html("<b style='color:red;'> Cant Add Recored </b>");
$(".alert1").show().delay(5000).fadeOut();
}
}
});
});
$(document).on("change","#selectcountry",function(){
var c_id = parseInt($("#selectcountry").val());
console.log(c_id);
$.ajax({
type : 'POST',
url : 'get_asc.php',
data : {'country_id' : c_id},
success : function(feedback)
{
$("#selectstate").html(feedback);
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" id="btn_close">×</button>
<h4 class="modal-title"></h4><div class="alert1" id="alert"></div>
</div>
<div class="modal-body">
<form name="add" method="post" id="std-form">
<div class="form-group item-required" id="selectcountryerror">
<label for="country">Country</label>
<select id="selectcountry" name="selectcountry" class="form-control input-value">
<option value="">Select Country</option>
<?php foreach ($result_country as $country) { ?>
<option value="<?php echo $country["country_id"]?>"><?php echo $country["country_name"]?></option>
<?php } ?>
</select>
</div>
<div class="form-group item-required" id="selectstateerror">
<label for="state">State</label>
<select id="selectstate" name="selectstate" class="form-control input-value">
<option value="">Select State</option>
</select>
</div>
<div class="form-group" id="areaerror">
<button type="button" class="btn btn-default" id="adddata" >Add Data</button>
<button type="button" class="btn btn-default" id="savedata" data-dismiss="">Save Data</button><br>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btnclose" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<center>
<button type="button" class="btn btn-info btn-md" id="reg" >Click Here For Registration Form</button>
</center>
</div>
</body>
get_asc.php
**insert/select page**
<?php
include("db/db.php");
if(isset($_POST['country_id']))
{
$select_state = "SELECT state_id,c_id,state_name from state where c_id = '".$_POST['country_id']."' ";
$result_state = mysqli_query($con,$select_state);
?>
<option value="">Select State</option>
<?php
foreach($result_state as $state) {
?>
<option value="<?php echo $state["state_id"]; ?>"><?php echo $state["state_name"]; ?></option>
<?php
}
}
elseif($_REQUEST['action']=="ins_std")
{
$country = mysqli_real_escape_string($con,$_POST['country']);
$state = mysqli_real_escape_string($con,$_POST['state']);
$insert_std = "INSERT into student (s_id,c_id) values ('".$state."','".$country."')";
$res_std=mysqli_query($con,$insert_std);
if($res_std){
echo json_encode("yes");
}else{
echo json_encode("fail");
}
}
?>
标签：modal-dialog,mysql,php,jquery 来源： https://codeday.me/bug/20191109/2011967.html