estou criando um site html e sou meio iniciante ainda. Estou fazendo uma tela de cadastro de estabelecimentos. Minha problema é: ao selecionar um radio button, quero que mude os dados do select (combobox). Exemplo: Radio Button Instituição, quero que mostre no select (Normal, tecnico ou superior), caso mude de opcao, como Geral mudar o select para parques, compras e etc Desde ja agradeço.
1 Resposta
Isso é simples:
$('input').on('change', function() {
$('select').val(this.value);
});
Como a tua pergunta não tem código a exemplificar deixo um exemplo genérico. Usando $('select').val(this.value);
estás a dizer ao select para escolher a option
cujo value
é o this.value
. Ora o this.value
nessa função é o value
do input.
Em baixo tens um JSON que configura as diferentes possibilidades dos option
do select, que é montado no momento da escolha do input.
O código que usei foi este:
var opcoes = {
instituicao: {
values: ['normal', 'tecnico', 'superior'],
html: ['Normal', 'Técnico', 'Superior']
},
hospital: {
values: ['clinica', 'particular', 'hospital'],
html: ['Clínica', 'Particular', 'Hospital']
},
geral: {
values: ['bar', 'parques', 'compras'],
html: ['Bar', 'Parques', 'Compras']
}
};
var $select = $('select#tipos');
$('input').on('change', function() {
var options = opcoes[this.value]; // ler o valor do input e usá-lo como chave do objeto de opções
if (options) $select.html(''); // esvaziar o select caso haja conteudo
options.values.forEach(function(value, i) {
var el = $('<option/>', { // criar um novo elemento
value: value, // dar-lhe um value
html: options.html[i] // dar-lhe um texto
});
$select.append(el); // inserir no select
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Instituição
<input type="radio" name="tipos" value="instituicao" checked>
</label>
<label>Hospital
<input type="radio" name="tipos" value="hospital">
</label>
<label>Geral
<input type="radio" name="tipos" value="geral">
</label>
<select name="" id="tipos">
<option value="normal">Normal</option>
<option value="tecnico">Tecnico</option>
<option value="superior">Superior</option>
</select>