Question

任何人都可以告诉我它为什么会被使用以及它将会产生什么 $(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);
      } 

    });
  });

});

提前致谢。

Answer 1

此脚本将从州名/ 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
      } 

    });
  });
});

Answer 2

尝试完成ajax参数（添加dataType）并为数据创建变量别名，如下所示：

  type: "POST",
  url: "city_names.php",
  data: {data:dataString},
  dataType:"html",
  cache: false,
  success: function(html)
  {

    $(".city").html(html);
  }

Answer 3

您应该在ajax调用中使用 dataType：＆＃39; html＆＃39; 。

根据Documentation，

dataType是你期望从服务器回来的，比如json，html，   文字等。如果没有指定，jQuery将尝试根据响应的MIME类型推断它（XML MIME类型将产生XML，在1.4 JSON中将产生一个JavaScript对象，在1.4脚本中将执行脚本，其他任何东西将是以字符串形式返回）。可用的类型（以及作为成功回调的第一个参数传递的结果）是：

＆＃39; html＆＃39; ：以纯文本形式返回HTML;包含的脚本标记被评估   插入DOM时。

$ this = $（this） 这意味着您将当前对象分配给名为 $ this 的变量。

这不是关键字。它只是一个变量名称。

你应该写

$.ajax({
  type : 'POST',
  url : 'city_names.php',
  dataType : 'html', // add dataType 
  data:dataString,
  cache: false,
  success : function(data){
      $(".city").html(data);
  } 
});

'state_id='+ id是一个字符串连接示例。 ＆＃39; state_id =＆＃39; 是一个字符串， id 是一个javascript变量。

有关详细信息，请查看此link。

希望它会对你有所帮助： - ）

Answer 4

＆＃13;

<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>

＆＃13;

	
select {
	width: 50%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 2px;
	box-sizing: border-box;
}

＆＃13;

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>


		 
<h3 align="center" style="color:red;"> country state city dropdown using ajax ,mysqli,php   </h3>
		<form method="post" id="frm">	
	<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();">
	<option value="">Select Country</option>
   
   <?php 
		while($row_country=mysqli_fetch_assoc($sql_row3 ))
{ 
			echo '<option value="'.$row_country['id'].'">'.$row_country['country_name'].'</option>';
		
	
	}
   ?>
</select>

 </div>
	<div class="form-group">
					<label class="form-group">State</label>
				   

<select name="state" id="state" onchange="states();">
	<option value="">Select state</option>
	

   
</select>
 </div>

			<div class="form-group">          <label class="form-group">City</label>
					
<select name="city" id="city">
	<option value="">Select city</option>
</select>
 </div>
  
			
		</form>   
	
			

</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>';
        }
 }  

?>

＆＃13;

Answer 5

$(this).val()将返回当前DOM的值。

Answer 6

 $('select[name="country"]').on("change",function(e, param){
        var country_id = $(this).val();               
        if( country_id.length > 0 ) {
            $.ajax({
                url : "<?= site_url('quotation/stateByCountryAJAX');?>/"+country_id,
                type: "GET",
                dataType: "JSON",
                success: function(data){     
                    $('[name="state"]').empty()
                        .append('<option value="">Select State</option>');                   
                    if (data.length > 0) {
                        $.each(data, function(i, value) {
                            if(typeof(param) != "undefined" && param !== null) {
                                if(param.state == value.id) {                                  
                                    $('[name="state"]').append($('<option>').text(value.name).attr('value', value.id));
                                    $("[name='state']").val(param.state).trigger('change');                                  
                                } else {
                                    $('[name="state"]').append($('<option>').text(value.name).attr('value', value.id));  
                                }
                            } else {                       
                                $('[name="state"]').append($('<option>').text(value.name).attr('value', value.id));  
                            }
                        });
                        // $("[name='state']").selectpicker("refresh");
                        $(".print-error-msg").css('display','none');
                        $(".print-error-msg").html('');
                    } else {
                        $(".print-error-msg").css('display','block');
                        $(".print-error-msg").html('State data not found!');
                    }   
                },
                error: function (jqXHR, textStatus, errorThrown){
                    $(".print-error-msg").css('display','block');
                    $(".print-error-msg").html('Error get data from ajax');                    
                }
            });
        }
    });

public function cityByStateAJAX($state_id) {
    $data = $this->quotationData->cityByStateAJAX($state_id);       
    echo json_encode($data);
}

public function cityByStateAJAX($state_id) {
    $this->db->from('cities'); 
    $this->db->where('state_id',$state_id);
    $this->db->where('is_active','1');     
    $this->db->where('is_deleted',0);
    $query=$this->db->get();
    // echo $this->db->last_query();
    return $query->result();
}

ajax for country state city

6 个答案: