1

Alguém saberia me dizer porque essa linha de comando não esta funcionando:

$("#marcas_select + #modelos_teste").css("background-color", "yellow");

aqui esta o código completo. Como todos podem ver o objetivo é deixa o select modelo_teste com o background amarelo

$(document).on('change', ':focus', function(evt) {

    $("#marcas_select + #modelos_teste").css("background-color", "yellow");

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group nested-fields" style="border: 1px solid red">

  <div class="field col-xs-3">
    <label for="person_carros_attributes_0_marca_id">Marca</label>
    <select id="marcas_select" class="form-control" name="person[carros_attributes][0][marca_id]"><option value="">Selecionar marca</option>
      <option value="1">Fiat</option>
      <option value="2">Chevrollet</option>
      <option value="3">Ford</option>
    </select>
  </div>
  <br></br>
<div class="field col-xs-3">
  <label for="person_carros_attributes_0_modelo_id">Modelo</label>

   <select id="modelos_teste" class="form-control" name="person[carros_attributes][0][modelo_id]"><option value="6">Uno</option>
    <option value="7">Palio</option>
    <option value="8">Siena</option>
    <option value="9">Prisma</option>
    <option value="10">Onix</option>
    <option value="11">Cobalt</option>
    <option value="12">Ka</option>
    <option value="13">Toro</option>
  </select>
</div>

2 Respostas 2

2

Código funcionando

$('#marcas_select').on('focus', function(evt) {

  $('#modelos_teste').css('background-color', 'yellow');

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group nested-fields" style="border: 1px solid red">

  <div class="field col-xs-3">
    <label for="person_carros_attributes_0_marca_id">Marca</label>
    <select id="marcas_select" class="form-control" name="person[carros_attributes][0][marca_id]">
      <option value="">Selecionar marca</option>
      <option value="1">Fiat</option>
      <option value="2">Chevrollet</option>
      <option value="3">Ford</option>
    </select>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div class="field col-xs-3">
    <label for="person_carros_attributes_0_modelo_id">Modelo</label>

    <select id="modelos_teste" class="form-control" name="person[carros_attributes][0][modelo_id]">
      <option value="6">Uno</option>
      <option value="7">Palio</option>
      <option value="8">Siena</option>
      <option value="9">Prisma</option>
      <option value="10">Onix</option>
      <option value="11">Cobalt</option>
      <option value="12">Ka</option>
      <option value="13">Toro</option>
    </select>
  </div>

$("#marcas_select + #modelos_teste").css("background-color", "yellow");

este '+' entre os ids, diz que ele vai pegar todos elementos que tem id marcas_select seguidos obrigatoriamente por um elemento com id modelos_teste

neste link você pode ler a doc deste seletor

Caso explique qual sua necessidade diga que posso te ajudar

3
  • vou ter varios select com o id marcas_select por isso acho que isso: "#marcas_select:focus + #modelos_teste" seria mais adequado, só que nao esta funcionando 29/11/2016 às 17:27
  • Não é uma boa pratica repetir IDS, eles são unicos utilize classes para este tipo de modelo, e acho que você não entendeu como funciona o seletor, nunca vai funcionar pois entre o id marcas_select tem "</div> <br></br> <div class="field col-xs-3"> <label for="person_carros_attributes_0_modelo_id">Modelo</label>" eles não estão nem no mesmo escopo. 29/11/2016 às 17:48
  • Na verdade ID repetido causam diversos bugs @ErasmoSantos, é totalmente impraticável. Se precisar de um mesmo seletor para vários campos, use atributos iguais ou classes se for o caso.
    – BrTkCa
    29/11/2016 às 20:31
1

Para deixar o select modelo_teste com o background amarelo:

$(document).on('change', ':focus', function(evt) {
    $('#modelos_teste').css('background-color', 'yellow');
});

Veja funcionando no JsFiddle

2
  • preciso que o modelo_teste seja ativado partir do #marcas_select:focus, pois terei mais select com a div modelos_teste(sei que nao se deve repetir id =D), por isso acho que o mais adequado pra mim seria $("#marcas_select + #modelos_teste"). só que nao esta funcionando 29/11/2016 às 17:35
  • @ErasmoSantos, você quer que os dois fiquem com background amarelo? Se for isso você pode usar ,. Ficaria $('#marcas_select, #modelos_teste').css('background-color', 'yellow'); 29/11/2016 às 17:38

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .