Load Values in 2 dropdowns based on 1 dropdown

Hi all,

I have 3 Dropdowns in my form for city, state and country. City and State are dependent on Country. There is no relation between city and State. Each one has their own model. City has FK as country_id and also State model has FK as country_id.

So when I select country, I want that my city and state dropdowns are loaded with appropriate values with AJAX call. I know how to load one dropdown from another dropdown. But here I want to load 2 dropdowns(city and state) from single Dropdown (country).

For single dropdown take reference from below link :

http://www.yiiframework.com/wiki/24/

Appreciate your help!!

This is for 1 on 1, but if U check this

AJAX

U will see tat U can specify success and in that case both update and replace will be ignored.

Suggestion, return from Controller both type of data (cities and states) and specify which one should go where in success option. Something like :




  'success' => 'js:function (data) {

     $("#stateDropDown").replaceWith(data.states);

     $("#cityDropDown").replaceWith(data.cities);


   }'



1 Like

Hi, what dragan told you is perfect. I just wanted to add this code taken from a post by our friend Christian Salazar. I don’t remenber if I made some changes but is his post not mine. I hope can be helpfull to you. Just change from 2 boxes to 3 or 4 or any number you wanna manage… It’s original spanish if you dont get any of this tell me I translate it and send it back… Good luck bro…




	$('#combo1').change(function(){

		var opcionSeleccionada = $(this);

		var idcategoria = opcionSeleccionada.val();

		

		if(idcategoria == 0) {

			$('#siguiente').hide('slow');

			return;

		}

		

		var action = 'index.php?r=/combodependiente/default/obtenerproductos&idcategoria='+idcategoria;


		$('#reportarerror').html("");

		$.getJSON(action, function(listaJson) {

			$('#combo2').find('option').each(function(){ $(this).remove(); });

			

			$.each(listaJson, function(key, producto) {

				$('#combo2').append("<option value='" + producto.idproducto + "'>" + producto.nombre + "</option>");

			});

				

			$('#seleccion').html("Ok, ahora selecciona un producto:");

			$('#siguiente').show('slow');

		}).error(function(e){ $('#reportarerror').html(e.responseText); });		

	});

	








	$('#botonseleccion').click(function(){

		alert("idproducto es: "+$('#combo2').val());

	});







	$('#combo1').change(function(){

		var opcionSeleccionada = $(this);

		var idcategoria = opcionSeleccionada.val();

		

		var action = 'index.php?r=/combodependiente/default/obtenerproductos&idcategoria='+idcategoria;


		$.getJSON(action, function(listaJson) {

			$('#combo2').find('option').each(function(){ $(this).remove(); });

			

			$.each(listaJson, function(key, producto) {

				$('#combo2').append("<option value='" + producto.idproducto + "'>" + producto.nombre + "</option>");

			});

		})

	});








	public function actionObtenerProductos($idcategoria)

	{

		$this->selectdb();

		$resp = Producto::model()->findAllByAttributes(array('idcategoria'=>$idcategoria));

		header("Content-type: application/json");

		echo CJSON::encode($resp);

	}