0

Eu tenho esse código aqui: https://jsfiddle.net/pedroguilherme/ka80cruz/2/

js

var cidades = [
    'São Paulo',
    'Rio de Janeiro',
    'Bahia'];

cidades.forEach(function(item){
    $('#cidades').append('<option>' + item + '</option>');
});


var test = [
    'Test1',
    'Test2',
    'Test3'];

test.forEach(function(item){
    $('#test').append('<option>' + item + '</option>');
});

html

<select id="cidades" class="cidades"></select>
<select id="test" class="test"></select>

Importante Eu quero ao selecionar a option São Paulo incluir apenas dentro do outro select... que é o select com id test a option Test 1.

E eu quero ao selecionar a option Rio de Janeiro incluir apenas dentro do outro select... que é o select com id test a option Test 2.

E eu quero ao selecionar a option Porto Alegre incluir apenas dentro do outro select... que é o select com id test a option Test 3.

  • Append não resolve,
  • Não consigo fazer isso via forEach,
  • Tentei map e não conseguir.
  • Tentei : select com change não deu certo.
  • Tentei change, "click", one etc não deu certo.

Voltando.... :)

Eu queria fazer assim

$('#saopaulo').change(function() {
      $("#test1").html('<option>Menino Jesus</option>');
});

 $('#riodejaneiro').change(function() {
      $("#test2").html('<option>CDF Master</option>');
});

 $('#portoalegre').change(function() {
      $("#test3").html('<option>Ethos</option>');
});

1 Resposta 1

0

Se entendi bem o propósito, você poderia colocar um value nas options do select das cidades com os índices (index):

cidades.forEach(function(item, index){
    $('#cidades').append('<option value="'+ index +'">' + item + '</option>');
});

E depois pegar o item na array test de acordo com o valor do value selecionado no select:

$('#cidades').change(function() {
   $("#test").html('<option>'+  test[$(this).val()] +'</option>');
});

Veja:

var cidades = [
    'São Paulo',
    'Rio de Janeiro',
    'Bahia'];

cidades.forEach(function(item, index){
    $('#cidades').append('<option value="'+ index +'">' + item + '</option>');
});


var test = [
    'Test1',
    'Test2',
    'Test3'];

test.forEach(function(item, index){
    $('#test').append('<option value="'+ index +'">' + item + '</option>');
});

$('#cidades').change(function() {
   $("#test").html('<option>'+  test[$(this).val()] +'</option>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="cidades" class="cidades"></select>
<select id="test" class="test"></select>

3
  • Dá pra usar sem value tb, mas não com id.
    – Sam
    2/05/2019 às 3:42
  • Sem o value vc pegaria o index da option e pegaria o mesmo index da outra array.
    – Sam
    2/05/2019 às 13:51
  • Na minha resposta, é só trocar o test[$(this).val()] por test[$("option:selected", this).index()].
    – Sam
    2/05/2019 às 14:41

Você deve fazer log-in para responder a esta pergunta.