誰能告訴我爲什麼會使用，會是什麼簡要 $(this).val(); 生產也解釋了var dataString = 'state_id='+ id;阿賈克斯國家州市
以下是完整的代碼提前
$(document).ready(function(){
$(".state").change(function(){
var id=$(this).val();
var dataString = 'state_id='+ id;
$.ajax({
type: "POST",
url: "city_names.php",
data: dataString,
cache: false,
success: function(html)
{
$(".city").html(html);
}
});
});
});
感謝。
這個腳本會得到國家的名稱/ ID所有城市的名單：
$(document).ready(function()
{
$(".state").change(function() // as state change, ajax will be called along with passing state value
{
var id=$(this).val(); // it will contain the selected state value
var dataString = 'state_id='+ id; // it will bind state value as post data to ajax
$.ajax
({
type: "POST",
url: "city_names.php", // this file will find list of all city names from state name
data: dataString, // it will pass parameters (state name)
cache: false,
success: function(html)
{
$(".city").html(html); // this will set list of cities in city list
}
});
});
});
嘗試完成AJAX參數（添加的dataType），並做出變量別名數據，那麼這樣的：
type: "POST",
url: "city_names.php",
data: {data:dataString},
dataType:"html",
cache: false,
success: function(html)
{
$(".city").html(html);
}
您應該在您的ajax調用中使用dataType：'html'。
數據類型是你期待什麼樣的JSON，HTML 文字等服務器返回。如果沒有指定，jQuery將嘗試根據響應的MIME類型推斷它（XML MIME類型將生成XML，在1.4中JSON將生成一個JavaScript對象，在1.4腳本中將執行該腳本，而其他任何東西都將作爲字符串返回）。可用類型（以及作爲成功回調的第一個參數傳遞的結果）爲：
'html'：以純文本形式返回HTML;包含的腳本標記在插入DOM時評估爲 。
$此= $（本） 這意味着要分配當前對象到一個名爲$此變量。
這不是關鍵字。它只是一個變量名稱。
你應該寫
$.ajax({
type : 'POST',
url : 'city_names.php',
dataType : 'html', // add dataType
data:dataString,
cache: false,
success : function(data){
$(".city").html(data);
}
});
'state_id='+ id是一個字符串連接的例子。 'state_id ='是一個字符串，id是一個JavaScript變量。
有關詳細信息，請檢查此link。
希望它會幫助你:-)
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript">
function showState(country_id)
{
document.frm.submit();
}
function showCity(state_id)
{
document.frm.submit();
}
</script>
<script type="text/javascript">
function countries()
{
var countryID = $('#country').val();
//alert(countryID);
$.ajax({
type:'POST',
url:'logic.php',
data:'country_id='+countryID,
success:function(html){
$('#state').html(html);
}
});
}
</script>
<script type="text/javascript">
function states()
{
var stateID = $('#state').val();
//alert(stateID);
$.ajax({
type:'POST',
url:'logic.php',
data:'state_id='+stateID,
success:function(html){
$('#city').html(html);
}
});
}
</script>
\t
select {
\t width: 50%;
\t padding: 12px 20px;
\t margin: 8px 0;
\t display: inline-block;
\t border: 1px solid #ccc;
\t border-radius: 2px;
\t box-sizing: border-box;
}database :-
create 3 table countries , states , cities
--
-- Database: `crud`
-- Table structure for table `cities`
--
CREATE TABLE IF NOT EXISTS `cities` (
`id` int(100) NOT NULL AUTO_INCREMENT,
`city_name` varchar(100) NOT NULL,
`state_id` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
--
-- Dumping data for table `cities`
--
INSERT INTO `cities` (`id`, `city_name`, `state_id`) VALUES
(1, 'bihar', '1'),
(2, 'xyz', '1'),
(3, 'indore', '2'),
(4, 'ujjain', '2'),
(5, 'xyz1', '3'),
(6, 'xyz2', '3');
-- --------------------------------------------------------
--
-- Table structure for table `countries`
--
CREATE TABLE IF NOT EXISTS `countries` (
`id` int(100) NOT NULL AUTO_INCREMENT,
`country_name` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
--
-- Dumping data for table `countries`
--
INSERT INTO `countries` (`id`, `country_name`) VALUES
(1, 'india'),
(2, 'usa');
-- --------------------------------------------------------
--
-- Table structure for table `states`
--
CREATE TABLE IF NOT EXISTS `states` (
`id` int(100) NOT NULL AUTO_INCREMENT,
`state_name` varchar(100) NOT NULL,
`country_id` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
--
-- Dumping data for table `states`
--
INSERT INTO `states` (`id`, `state_name`, `country_id`) VALUES
(1, 'up', '1'),
(2, 'mp', '1'),
(3, 'bihar', '1'),
(4, 'gujrat', '1'),
(5, 'washington', '2'),
(6, 'london', '2');
index.php
<!DOCTYPE html>
<html>
<head>
<h2> country state city dropdown using ajax,mysqli,php</h2>
</head>
<body>
\t \t
<h3 align="center" style="color:red;"> country state city dropdown using ajax ,mysqli,php </h3>
\t \t <form method="post" id="frm"> \t
\t <div class="form-group">
<label class="form-group">Country</label>
<?php
$sql3="select * from countries";
$sql_row3=mysqli_query($conn,$sql3);
?>
<select name="country" id="country" onchange="countries();">
\t <option value="">Select Country</option>
<?php
\t \t while($row_country=mysqli_fetch_assoc($sql_row3))
{
\t \t \t echo '<option value="'.$row_country['id'].'">'.$row_country['country_name'].'</option>';
\t \t
\t
\t }
?>
</select>
</div>
\t <div class="form-group">
\t \t \t \t \t <label class="form-group">State</label>
\t \t \t \t
<select name="state" id="state" onchange="states();">
\t <option value="">Select state</option>
\t
</select>
</div>
\t \t \t <div class="form-group"> <label class="form-group">City</label>
\t \t \t \t \t
<select name="city" id="city">
\t <option value="">Select city</option>
</select>
</div>
\t \t \t
\t \t </form>
\t
\t \t \t
</body>
</html>
logic.php
<?php
include("config.php");
if(isset($_POST['country_id']))
{
$country_id=($_POST['country_id']);
$sql1="select * from states where country_id='$country_id'";
$sql_row1=mysqli_query($conn,$sql1);
echo ' <option value="">Select state</option>';
while($row=mysqli_fetch_assoc($sql_row1)){
echo '<option value="'.$row['id'].'">'.$row['state_name'].'</option>';
}
}
//// select state
if(isset($_POST['state_id']))
{
$state_id=($_POST['state_id']);
$sql2="select * from cities where state_id='$state_id'";
$sql_row2=mysqli_query($conn,$sql2);
echo ' <option value="">Select city</option>';
while($rows=mysqli_fetch_assoc($sql_row2)){
echo '<option value="'.$rows['id'].'">'.$rows['city_name'].'</option>';
}
}
?>$(this).val()將返回當前DOM的價值。