У меня есть два раскрывающихся списка. Первый показывает регионы из страны, другой – каждый город в выбранном состоянии. Проблема в том, что после отправки моей формы MySQL Database получает из первого списка идентификатор выбранного региона, а второй список ничего не показывает. Я хочу, чтобы моя база данных получала правильную информацию. Название региона и название города.
Как я могу это сделать?
$(document).ready(function() { $(".region").change(function() {`enter code here` var id = $(this).val(); var dataString = 'id=' + id; $.ajax({ type: "POST", url: "ajax_city.php", data: dataString, cache: false, success: function(html) { $(".city").html(html); } }); }); }); section.php : <?php <label>Country :</label> <select name="country" class="country"> <option selected="selected">--Select Region--</option> <?php $sql = mysql_query("SELECT id,region FROM regions ORDER BY region"); while ($row = mysql_fetch_array($sql)) { $id = $row['id']; $region = $row['region']; echo '<option value="' . $id . '">' . $region . '</option>'; } ?> </select> <br/><br/> <label>City :</label> <select name="city" class="city"> <option selected="selected">--Select City--</option> </select> ?>
ajax_city.php выглядит так: <?php if($_POST['id']) { $id = $_POST['id']; $sql=mysql_query("SELECT DISTINCT city FROM CITY where id_city=$id order by city"); while($row = mysql_fetch_array($sql)) { $id=$row['id']; $data=$row['city']; echo "<option value=$id>$data</option>"; } } ?>
Код работает нормально. Но я не могу понять, что делать с базой данных. Думаю, мне нужно что-то изменить в JavaScript?
Любая помощь, пожалуйста?
<script type="text/javascript"> $(document).ready(function() { $(".country").change(function() { var id=$(this).val(); var region = $(this).find('option:selected').html(); $.ajax({ type: "POST", url: "ajax_city.php", data: { country: id , name : region }, cache: false, success: function(html) { $(".city").html(html); $(".city").removeAttr('disabled'); } }); }); }); </script>.<script type="text/javascript"> $(document).ready(function() { $(".country").change(function() { var id=$(this).val(); var region = $(this).find('option:selected').html(); $.ajax({ type: "POST", url: "ajax_city.php", data: { country: id , name : region }, cache: false, success: function(html) { $(".city").html(html); $(".city").removeAttr('disabled'); } }); }); }); </script>.<script type="text/javascript"> $(document).ready(function() { $(".country").change(function() { var id=$(this).val(); var region = $(this).find('option:selected').html(); $.ajax({ type: "POST", url: "ajax_city.php", data: { country: id , name : region }, cache: false, success: function(html) { $(".city").html(html); $(".city").removeAttr('disabled'); } }); }); }); </script>
section.php
<label>Country :</label> <select name="country" class="country"> <option selected="selected">--Select Region--</option> <?php $sql=mysql_query("SELECT id,region FROM regions ORDER BY region"); while($row = mysql_fetch_array($sql)) { $id=$row['id']; $region=$row['region']; echo '<option value="'.$id.'">'.$region.'</option>'; } ?> </select><br/><br/> <label>City :</label> <select disabled name="city" class="city"> <option selected="selected">--Select City--</option> </select>
ajax_city.php
<?php if($_POST['country']) { $id = $_POST['country']; $region = $_POST['name']; $sql = mysql_query("SELECT DISTINCT city FROM CITY where id_city = $id order by city"); while($row = mysql_fetch_array($sql)) { $id=$row['id']; $data=$row['city']; echo "<option value=$id>$data</option>"; } } ?>
База данных: country
CREATE TABLE IF NOT EXISTS `city` ( `id_city` int(11) NOT NULL AUTO_INCREMENT, `city` varchar(30) NOT NULL, `pid` int(11) NOT NULL, PRIMARY KEY (`id_city`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ; INSERT INTO `city` (`id_city`, `city`, `pid`) VALUES(1, 'Gujarat', 1),(2, Maharashtra', 1),(3, 'Rajasthan', 1),(4, 'Madhya Pradesh', 1),(5, 'Lahore', 2),(6, 'hyderabad', 2); CREATE TABLE IF NOT EXISTS `regions` ( `id` int(11) NOT NULL AUTO_INCREMENT, `region` varchar(30) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ; INSERT INTO `regions` (`id`, `region`) VALUES(1, 'India'),(2, 'Pakistan');
Javascript On default.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".country").change(function() { var id=$(this).val(); var region = $(this).find('option:selected').html(); $.ajax({ type: "POST", url: "ajax_city.php", data: { country: id , name : region }, cache: false, success: function(html) { $(".city").html(html); $(".city").removeAttr('disabled'); } }); }); }); </script> <label>Country :</label> <select name="country" class="country"> <option selected="selected">--Select Region--</option> <?php $conn=mysql_connect("localhost","root",""); $db=mysql_select_db("country",$conn); $sql=mysql_query("SELECT id,region FROM regions ORDER BY region"); while($row = mysql_fetch_array($sql)) { $id=$row['id']; $region=$row['region']; echo '<option value="'.$id.'">'.$region.'</option>'; } ?> </select><br/><br/> <label>City :</label> <select disabled name="city" class="city"> <option selected="selected">--Select City--</option> </select>.<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".country").change(function() { var id=$(this).val(); var region = $(this).find('option:selected').html(); $.ajax({ type: "POST", url: "ajax_city.php", data: { country: id , name : region }, cache: false, success: function(html) { $(".city").html(html); $(".city").removeAttr('disabled'); } }); }); }); </script> <label>Country :</label> <select name="country" class="country"> <option selected="selected">--Select Region--</option> <?php $conn=mysql_connect("localhost","root",""); $db=mysql_select_db("country",$conn); $sql=mysql_query("SELECT id,region FROM regions ORDER BY region"); while($row = mysql_fetch_array($sql)) { $id=$row['id']; $region=$row['region']; echo '<option value="'.$id.'">'.$region.'</option>'; } ?> </select><br/><br/> <label>City :</label> <select disabled name="city" class="city"> <option selected="selected">--Select City--</option> </select>.<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".country").change(function() { var id=$(this).val(); var region = $(this).find('option:selected').html(); $.ajax({ type: "POST", url: "ajax_city.php", data: { country: id , name : region }, cache: false, success: function(html) { $(".city").html(html); $(".city").removeAttr('disabled'); } }); }); }); </script> <label>Country :</label> <select name="country" class="country"> <option selected="selected">--Select Region--</option> <?php $conn=mysql_connect("localhost","root",""); $db=mysql_select_db("country",$conn); $sql=mysql_query("SELECT id,region FROM regions ORDER BY region"); while($row = mysql_fetch_array($sql)) { $id=$row['id']; $region=$row['region']; echo '<option value="'.$id.'">'.$region.'</option>'; } ?> </select><br/><br/> <label>City :</label> <select disabled name="city" class="city"> <option selected="selected">--Select City--</option> </select>
ajax_city.php
<?php if($_POST['country']) { $conn=mysql_connect("localhost","root",""); $db=mysql_select_db("country",$conn); $id = $_POST['country']; $region = $_POST['name']; $sql = mysql_query("SELECT DISTINCT city FROM CITY where pid = $id order by city"); while($row = mysql_fetch_array($sql)) { $id=$row['id']; $data=$row['city']; echo "<option value=$id>$data</option>"; } } ?>