Combobox, DropDownList, Select, enfim, como queira chamar. Preparei um artigo mostrando como carregar os options de um select dinamicamente utilizando apenas JSON, sem chamadas Ajax.
Utilizei apenas HTML e jQuery para mostrar o carregamento do DropDownList dinâmico de categorias e subcategorias baseado em dois arrays. O mesmo se aplicaria, obviamente, para carregar Estado e Cidade dinamicamente.
A grande vantagem aqui é a velocidade em carregar o segundo combo, carregar sem Ajax e não depender de uma linguagem de programação backend (C#, PHP…)
Fundamentalmente é apenas mais uma alternativa para casos específicos.
Copie o código abaixo e salve em um arquivo (.html) e execute no navegador de sua preferência.
<!DOCTYPE html> <pre><html> <head> <title></title> <meta charset="utf-8" /> </head> <body> <select id="combo1"> <option>Selecione</option> </select> <select id="combo2"> <option>Selecione</option> </select> <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> <script type="text/javascript"> //Array de Categoria em JSON puro var categorias = [ { "Id": "1", "Categoria": "Linguagem de programação" }, { "Id": "2", "Categoria": "Banco de dados" }] //Array de Subcategoria em JSON puro var subCategorias = [ { Id: 1, IdCategoria: 1, Nome: "C#" }, { Id: 2, IdCategoria: 1, Nome: "Java" }, { Id: 3, IdCategoria: 2, Nome: "SQL Server" }, { Id: 4, IdCategoria: 2, Nome: "My Sql" }] $(document).ready(function () { //Percorre o array de categorias para popular o combo de categorias $.each(categorias, function (i, categoria) { //Faz o append (adiciona) cada um dos itens do array como options do select de id combo1 $("#combo1").append($('<option>', { //neste caso o value do option vai ser a pripriedade Id (é case sensitive, então cuide da nomenclatura) value: categoria.Id, //no text estou usando a propriedade Categoria dos objetos dentro do array categoria (case sensitive também) text: categoria.Categoria })) }) //Vai ser acionado cada vez que o combo1 tracar de item selecionado $("#combo1").change(function () { //Pegando o novo valor selecionado no combo var categoria = $(this).val() carregaCombo2(categoria); }) //Definir o item selecionado no carregamento da página $("#combo1").val(2) //carregar o combo2 baseado na categoria selecionada carregaCombo2(2) //Selecionar a subcategoria passando o id dela $("#combo2").val(3) }) function carregaCombo2(categoria) { //Fazer um filtro dentro do array de categorias com base no Id da Categoria selecionada no combo1 var subCategoriasFiltradas = $.grep(subCategorias, function (e) { return e.IdCategoria == categoria; }); //Faz o append (adiciona) cada um dos itens do array filtrado no combo2 $("#combo2").html('<option>Selecione</option>'); $.each(subCategoriasFiltradas, function (i, subcategoria) { $("#combo2").append($('<option>', { value: subcategoria.Id, //Id do objeto subcategoria text: subcategoria.Nome //Nome da Subcategoria })) }) } </script> </body> </html>