When selecting option displays div with

Question

When selecting option displays div with

Navigation

#1 by (1 votes)
#2 by (0 votes)

5

I have a question, since I do not handle anything with PHP , I would like someone to help me with how to mount or implement a Jquery that I found.

In my case there are 2 selects , one that would be dubbed Estado and another Cidade , and when you select Option in Estado , other options (in the case of Cidades ) in select Cidade .

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

For example:

select : São Paulo

select : Saint Bernard

div: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius nisi vitae neque malesuada vehicula at eget ante. Morbi to eros consectetur, lobortis just ut, sapien elementum. 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>

html jquery html-select jquery-select2

asked by anonymous 18.05.2015 / 17:18

2 answers

Get event click inside of iframe with jQuery How to transfer a file with a corrupted name?

score 1 · Answer 1

Gustavo Teixeira , values in select boxes may have exact values such as numbers or letters NO space and NO accent , so you can work with these values in the future . From this principle, your select of states would become:

<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 that will contain the information of the chosen city:

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

Finally, JQUERY consists of:

Lay out the jQuery objects (select City, select State and City information div)

Declaring State objects and Cities (can come from external source like database, JSON, etc, just adapt them)

Work with JQuery to search these objects for user selection.

Conclusion:

See working at: link

// 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");         
    }

});

score 0 · Answer 2

Based on the assumption that you can already create the second <select> with their respective values, you can use the following technique:

Create the contents you want to show, and leave them hidden by default, and with ids referring to <option> of <select> .

That 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 they already exist in your DOM, the contents referring to each one of the cities will be hidden.

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

Create a class to force content to appear when it is 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 display of class active will have priority over that of class cidade-info . With that completed,

Assign the class active using jQuery, according to your choice.

To do this, simply 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 <option> of <select> , you turn on the <div> display for it. See this working code here .

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

It's worth pointing out that this is one way to solve your problem, based on your HTML. If% content% is not sister, this technique does not work. If there are other sibling elements in the DOM that do not contain% of content, you may have problems because of the class assignment.

There are other ways to get the result, one of them is using the method <div> .