Use Select2 to search states and cities

Asked

Viewed 421 times

2

I’m looking to improve the search for cities and states. I did this dynamic with the Select2:

		/*************** Procurar estado ***************/
		$( ".estado" ).select2({    
			placeholder: "Estado",
			ajax: {

				url: "https://www.agenciamove.com.br/php/procurar_estados.php",
				
				dataType: 'json',
				delay: 250,
				data: function (params) {
					return {
						q: params.term // search term
					};
				},
				processResults: function (data) {
					// parse the results into the format expected by Select2.
					// since we are using custom formatting functions we do not need to
					// alter the remote JSON data
					return {
						results: data
					};
				},
				cache: true
			}
		});	
		/*************** Procurar estado ***************/
		
		/*************** Procurar cidade ***************/
		$( ".cidade" ).select2({    
			placeholder: "Cidade",
			ajax: {

				url: "https://www.agenciamove.com.br/php/procurar_cidades.php?estado=26",						
				
				
				dataType: 'json',
				delay: 250,
				data: function (params) {
					return {
						q: params.term // search term
					};
				},
				processResults: function (data) {
					// parse the results into the format expected by Select2.
					// since we are using custom formatting functions we do not need to
					// alter the remote JSON data
					return {
						results: data
					};
				},
				cache: true
			}
		});	
		/*************** Procurar cidade ***************/		
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select class="estado form-control" name="estado" id="estado" style="width: 50%";></select>	
<select class="cidade form-control" name="cidade" id="cidade" style="width: 50%";></select>

In the search for cities part, it would be necessary to send the state id (as in the test I did "browse cities.php? status=26").

But I’m not finding a way for it to happen.

Is there any way that after searching for the state, the city will start with the state id?

  • It would be nice if the address https://www.agenciamove.com.br/php/procurar_estados.php was working, to help you.

  • You have given a blocking message from Stack: Cross-Origin Request Blocked: The Same Origin Policy disallows Reading the remote Resource at https://www.agenciamove.com.br/php/busca_estados.php. (Reason: CORS request Did not Succeed). Blocked cross-origin request: Same Origin Policy (Same Origin Policy) prevents reading the remote resource at https://www.agenciamove.com.br/php/busca_estados.php?q=sao. (Reason: CORS header 'Access-Control-Allow-Origin' is not present).

  • It’s not that not.... It’s timeout anyway. I’m not even running your script... I’m just trying to get a get by Postman

  • I did in codepen and gives the same error. It is working, but this instruction is blocking the return.

  • I found a solution in the stack in English. You can add the id inside the Return { state_id: $(".status"). val(), q: params.term // search term };

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.