How to set the first position of the list in Javascript?

Asked

Viewed 106 times

0

Look at the picture;

inserir a descrição da imagem aqui

You notice that the first position of the list is being indicated with the arrow, as I do that every time the form is loaded it load with the first position of the list?

This is my HTML;

  <div class="form-group">
      <label class="col-sm-2 control-label"><fmt:message key="label.sagresPessoal.tela.prestacao.unidade.jurisdicionada" /></label>
      <div class="col-sm-8">
       <select id="idUJ" name="prestacaoFolha.idUnidadeGestora" class="form-control select2 ">
            <option value ="">-</option>
                <c:forEach items="${listPessoaJuridica}" var="PJ">
                    <option value="${fn:replace(PJ.codigo,'.','')}">${PJ.nome}</option>
               </c:forEach>
        </select>
      </div>
  </div>

I tried that way, but it didn’t work!;

$("#idUJ option:first").attr('selected','selected');

Please, how could I do?

I’m using this Javascript;

function justificarRemessa() {
    $('#idUJ').val();
    alert($('#idUJ').val());
    $('#idPeriodoInicio').val("");
    $('#idMotivo').val("");
    $('#idPeriodoFim').val("");
    $('#modalJustificar').modal('show');
}
javascript

  • What component are you using to build the search? By the way... because you need the first <option value ="">-</option>?

  • Did you mean the SECOND item of the list? Because by the code this selected is the first.

  • It is the first item on the list that is blank!

2 answers

1


To select the SECOND item from the list (since the first is "-"), use:

$('#idUJ option:eq(1)').prop('selected', true);

  • this did not catch, unfortunately :(

  • 1

    No? This test I did worked: https://jsfiddle.net/dbvz8usq/

  • I put as correct solution, but I forgot to mention that my form is a modal, and to clean should be a little different, that’s why in my case it did not work because my form is a modal.

1

To the select2() you can set the value of your option and disahalt the change event.

$(document).ready(() => {
  $('#idUJ').select2();
 
 //seleciona o valor da posição desejada
 let valor =  $("#idUJ option:eq(1)").val()
 
 //seleciona no select2 e disapara o evento
 $('#idUJ').val(valor).trigger('change');
 
});
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';
@import 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css';
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<div class="form-group">
  <label class="col-sm-2 control-label"><fmt:message key="label.sagresPessoal.tela.prestacao.unidade.jurisdicionada" /></label>
  <div class="col-sm-8">
    <select id="idUJ" name="prestacaoFolha.idUnidadeGestora" class="form-control select2 ">
      <option value="">-</option>
      <option value="a">Empresa 1</option>
      <option value="b">Empresa 2</option>
      <option value="c">Empresa 3</option>

    </select>
  </div>
</div>

  • This one didn’t take.

  • Didn’t take what?

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.