Неправильное написание в Javascript - Bootstrap для дизайна материалов
Я создал управляемую данными форму сотрудника в рабочей базе данных, я пишу код.
index.php:
<?php
//index.php
$connect = mysqli_connect("localhost", "root", "root", "ca2solution");
$country = '';
$query = "SELECT country FROM country_state_city GROUP BY country ORDER BY country ASC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$country .= '<option value="'.$row["country"].'">'.$row["country"].'</option>';
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:600px;">
<form method="post" action="testquattro.php">
<select name="country" id="country" class="form-control action">
<option value="">Select Country</option>
<?php echo $country; ?>
</select>
<br />
<select name="state" id="state" class="form-control action">
<option value="">Select State</option>
</select>
<br />
<select name="city" id="city" class="form-control">
<option value="">Select City</option>
</select>
<input class="btn btn-primary" name="submit" type="submit" value="Register..."><br>
</div>
</form>
</body>
</html>
<script>
$(document).ready(function(){
$('.action').change(function(){
if($(this).val() != '')
{
var action = $(this).attr("id");
var query = $(this).val();
var result = '';
if(action == "country")
{
result = 'state';
}
else
{
result = 'city';
}
$.ajax({
url:"fetch.php",
method:"POST",
data:{action:action, query:query},
success:function(data){
$('#'+result).html(data);
}
})
}
});
});
</script>
fetch.php:
<?php
//fetch.php
if(isset($_POST["action"]))
{
$connect = mysqli_connect("localhost", "root", "root", "ca2solution");
$output = '';
if($_POST["action"] == "country")
{
$query = "SELECT state FROM country_state_city WHERE country = '".$_POST["query"]."' GROUP BY state";
$result = mysqli_query($connect, $query);
$output .= '<option value="">Select State</option>';
while($row = mysqli_fetch_array($result))
{
$output .= '<option value="'.$row["state"].'">'.$row["state"].'</option>';
}
}
if($_POST["action"] == "state")
{
$query = "SELECT city FROM country_state_city WHERE state = '".$_POST["query"]."'";
$result = mysqli_query($connect, $query);
$output .= '<option value="">Select City</option>';
while($row = mysqli_fetch_array($result))
{
$output .= '<option value="'.$row["city"].'">'.$row["city"].'</option>';
}
}
echo $output;
}
?>
Теперь проблема, которую я хорошо продумал, - использовать форму шага, поддерживающую меня на сайте mdbootstrap.com, и пока что ничего странного, но когда я использую select, сайт говорит:
Стандарт MDB перезаписывает выбор для замены нашим выбором материалов. Вы должны использовать раньше, вы должны инициализировать
Кроме того, вам понадобится отдельный вызов для любых динамически генерируемых элементов.
Выберите код:
<select class="mdb-select colorful-select dropdown-primary" multiple searchable="Search here..">
<option value="" disabled selected>Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="4">Poland</option>
<option value="5">Japan</option>
</select>
<label>Label example</label>
<button class="btn-save btn btn-primary btn-sm">Save</button>
<script>
// Material Select Initialization
$(document).ready(function() {
$('.mdb-select').material_select();
});
</script>
и до этого ничего странного, драма, которую я достигаю, когда пытаюсь реализовать этот select в шаге формы, совпадает с данными, которые у меня были в index и fetch.php, с соответствующим сценарием, использующим сценарий select mdbootstrap. Я знаю, что это опечатка, но я не могу это исправить.
Для первого параметра страны нет проблем, после которого штаты и город отображаются не полностью.
Код соответствия.
<?php
//index.php
$connect = mysqli_connect("localhost", "root", "root", "ca2solution");
$country = '';
$query = "SELECT country FROM country_state_city GROUP BY country ORDER BY country ASC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$country .= '<option value="'.$row["country"].'">'.$row["country"].'</option>';
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- First Step -->
<form role="form" action="" method="post">
<div class="row setup-content-2" id="step-1">
<div class="col-md-12">
<h3 class="font-weight-bold pl-0 my-4"><strong>Basic Information</strong></h3>
<div class="form-group md-form">
<select name="country" id="country" class="mdb-select colorful-select dropdown-primary action" multiple searchable="Search here..">
<option value="" disabled selected>Scegli la Nazione</option>
<?php echo $country; ?>
</select>
<label>Label example</label>
<button class="btn-save btn btn-primary btn-sm">Save</button>
</div>
<div class="form-group md-form">
<select name="state" id="state" class="mdb-select colorful-select dropdown-primary action" multiple searchable="Search here..">
<option value="" disabled selected>Choose your country</option>
<option value="">Select State</option>
</select>
<label>Label example</label>
</div>
<div class="form-group md-form mt-3">
<select name="city" id="city" class="mdb-select colorful-select dropdown-primary" multiple searchable="Search here..">
<option value="" disabled selected>Choose your country</option>
<option value="">Select City</option>
</select>
<label>Label example</label>
</div>
<script>
$(document).ready(function(){
$('.action').material_select().change(function(){
if($(this).val() != '')
{
var action = $(this).attr("id");
var query = $(this).val();
var result = '';
if(action == "country")
{
result = 'state';
}
else
{
result = 'city';
}
$.ajax({
url:"fetch.php",
method:"POST",
data:{action:action, query:query},
success:function(data){
$('#'+result).html(data);
}
})
}
});
});
</script>
<button class="btn btn-mdb-color btn-rounded nextBtn-2 float-right" type="button">Next</button>
</div>
</div>