When selecting option displays div with

Question

I have a doubt, as I know nothing of PHP, i would like someone to help me how to assemble or implement a Jquery that I found.

In my case there are 2 selects, one who would be called Estado and another Cidade, and when selecting the Option in the Estado, displays the others options (in the case the Cidades) in the select Cidade.

Until then I have it ready, I’ll leave the code for whoever needs it. What I would need is when to select the second city, display a Div with information in it.

For example:

1. select: São Paulo
2. select: São Bernardo

div: Lorem ipsum dolor sit Amet, consectetur adipiscing Elit. Duis varius nisi vitae neque malesuada vehicula at eget ante. Morbi a eros consectetur, lobortis justo ut, Elementum sapien. Praesent et mollis ante. Vestibulum dignissim eros sed est imperdiet, at aliquam nunc egestas. Vestibulum ut diam eu erat condimentum lacinia pulvinar at turpis. Pellentesque ac odio ut ante interdum molestie.

var listadeCidades = new Array(4)
listadeCidades["Vazio"] = ["Cidade"];
listadeCidades["São Paulo"] = ["1a", "2a", "3a"];
listadeCidades["Rio de Janeiro"] = ["1b", "2b", "3b", "4b"];
listadeCidades["Paraná"] = ["1c", "2c", "3c"];
listadeCidades["Bahia"]= ["1d", "2d", "3d", "4d"];

function trocadeEstado(selectObj) {
	var idx = selectObj.selectedIndex;
	var which = selectObj.options[idx].value;
	cList = listadeCidades[which];
	var cSelect = document.getElementById("cidade_campo");
	var len=cSelect.options.length;
	while (cSelect.options.length > 0) {
		cSelect.remove(0);
	}
	var newOption;

	for (var i=0; i<cList.length; i++) {
		newOption = document.createElement("option");
		newOption.value = cList[i];
		newOption.text=cList[i];
		try {
			cSelect.add(newOption);
		}
		catch (e) {
			cSelect.appendChild(newOption);

		}
	}
}

 <form action="" method="post"> 
    <span><label for="estado"><strong>*</strong>Estado:</label>
    <select name="estado_campo" id="estado_campo" onchange="trocadeEstado(this);" required>
        <option value="Vazio">Estado</option>
        <option value="São Paulo">São Paulo</option>
        <option value="Rio de Janeiro">Rio de Janeiro</option>
        <option value="Paraná">Paraná</option>
        <option value="Bahia">Bahia</option>
    </select>
    </span>
            
    <span>
    <label for="cidade_campo"><strong>*</strong>Cidade:</label>
    <select name="cidade_campo" id="cidade_campo" required>
    	<option value="0">Cidade</option>
    </select>
	</span>
            
</form>

Answer 1

Gustavo Teixeira, values in select boxes may (must) have exact values such as numbers or letters NO SPACE AND NO ACCENT, in order to be able to work with these values in the future. Starting from this principle, your state select would be:

<select name="estado_campo" id="estado_campo" required>
    <option value="">Estado</option>
    <option value="SP">São Paulo</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="PR">Paraná</option>
    <option value="BA">Bahia</option>
</select>

The next step would be to add the div which will contain the information of the chosen city:

<div id="idCidadeInfo">Selecione um estado e uma cidade</div>

Finally, JQUERY constitutes:

1. Delcarar objects jQuery (select City, select State and div City information)
2. Declare State and Cities objects (can come from external source as database, JSON, etc, just adapt them)
3. Work with Jquery to search these objects according to user selection.

Completion:

See working in: http://jsfiddle.net/felipe_douradinho/4vfnk1pj/3/

// Declara para reuso
var select_Estado = $('#estado_campo');
var select_Cidade = $('#cidade_campo');
var div_CidadeInfo = $('#idCidadeInfo');

var estados = { };

estados.SP = [
    {cidade: 'São Paulo', descricao: 'Grande cidade'},
    {cidade: 'Campinas', descricao: 'Descrição de Campinas'}
];

estados.RJ = [
    {cidade: 'Cabo Frio', descricao: 'Descrição de Cabo Frio'},
    {cidade: 'Niterói', descricao: 'Descrição de Niterói'}
];

estados.PR = [
    {cidade: 'Londrina', descricao: 'Descrição de Londrina'},
    {cidade: 'Luiziania', descricao: 'Descrição de Luiziania'}
];

estados.BA = [
    {cidade: 'Campinas', descricao: 'Descrição de Campinas'},
    {cidade: 'Biritinga', descricao: 'Descrição de Biritinga'}
];

// Quando escolher um estado
select_Estado.on('change', function()
{
    var estado = $(this).val();

    if(estado != "")
    {
        select_Cidade.html('<option value="">Cidade</option>');

        // preenche lista de cidades
        $.each(estados[estado], function(index, valor)
        {
            var o = new Option(valor.cidade, index);
            $(o).html(valor.cidade);
            select_Cidade.append(o);
        });
        div_CidadeInfo.html("Selecione uma cidade"); 
    }
    else
    {
           // Reseta select da cidade
           var o = new Option("Cidade", "")
           $(o).html("Cidade");
           select_Cidade.html(o);

           div_CidadeInfo.html("Selecione um estado e uma cidade");         
    }
});

// Quando escolher uma cidade
$('#cidade_campo').on('change', function()
{
    // Procura pela cidade no objeto 'estados' da linha #1 buscando pelo index da cidade
    var indexCidadeEscolhida = $(this).val(); // guarda o index da cidade

    if(indexCidadeEscolhida != "")
    {
        var cidadeEscolhida      = estados[select_Estado.val()][indexCidadeEscolhida];
        div_CidadeInfo.html(cidadeEscolhida.cidade + ' => ' + cidadeEscolhida.descricao);
    }
    else
    {
        div_CidadeInfo.html("Selecione uma cidade");         
    }

});

Answer 2

Assuming you can already create the second <select> with their respective values, you can use the following technique:

1. Create the content you want to show, and leave it hidden by default, and with ids referencing <option> of <select>.

   This means, if you have HTML:

   <select name="cidade_campo" id="cidade_campo" required="">
       <option value="cidade1">1a</option>
       <option value="cidade2">2a</option>
       <option value="cidade3">3a</option>
   </select>
   

   The contents would be:

   <div class="cidade-info" id="cidade1">Info cidade 1a</div>
   <div class="cidade-info" id="cidade2">Info cidade 2a</div>
   <div class="cidade-info" id="cidade3">Info cidade 3a</div>
   

   And the CSS:

   .cidade-info{
       display: none;
   }
   

   In this way, although already existing in its DOM, the contents referring to each of the cities will be hidden.

   Note that in your HTML, the attribute value of <option> and the id of <div> of each content are equal. This reference is fundamental for this technique to work.

2. Create a class to force the content to appear when assigned to it:

   This can be done in CSS:

   .active{
       display: block !important;
   }
   

   You will use this class by assigning it to the desired content, via jQuery (which is what you asked). The !important serves to ensure that the class display active will have priority over the class cidade-info. With that concluded,

3. Make the class assignment active using jQuery, according to your choice.

   To do this, just bind a function, every time you change the value of <select>. Basically:

   jQuery(document).ready(function($) {
       $('#cidade_campo').on('change', function() {
           //Pego o valor do option
           var _val = $(this).val();  
   
           //Monto o seletor do conteúdo  
           var _seletor = '#' + _val; 
   
           //Adiciono a classe ao seletor escolhido
           $(_seletor).addClass('active'); 
   
           //Removo a classe dos irmãos dele, caso existam (e assim, escondo eles)
           $(_seletor).siblings().removeClass('active'); 
       });
   });
   

   Now, every time you change the <option> of <select>, you activate the display of <div> for it. See this code working here.

Note that if you decide to change your choice, you will show the content and hide any other content that has already been shown. That’s what the line $(_seletor).siblings().removeClass('active'); ago.

It is worth pointing out that this is a way to solve your problem, based on your HTML. If the <div> this technique does not work. If, in the GIFT, there are other fraternal elements other than the div content, you may have problems, because of the assignment of the classes.

There are other ways to get the result, one of them is by using the method toggleClass.