Skip to main content
Commonmark migration
Origen Enlace

Lo que podes hacer es que al hacer click sobre alguno de los a del dropdown se dispare una funcion, la cual tome el valor del a click-eado y lo ponga en el value del <input/>

##Ejemplo:

Ejemplo:

$('#opcionesCodigoOrdenTrabajo > a').on('click', setDropdownValue);

function setDropdownValue() {
  let $option = $(this); 
  // Buscamos el input donde establecer el valor de la opcion seleccionada
  $option.closest('.input-group').find('input').val($option.text());
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="input-group">
  <input type="text" class="form-control" name="codigoOrdenTrabajo" style="width: 65px" minlength="5" maxlength="5">
  <div class="input-group-append">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu" id="opcionesCodigoOrdenTrabajo">
      <a class="dropdown-item" href="#">Valor 1</a>
      <a class="dropdown-item" href="#">Valor 2</a>
    </div>
  </div>
</div>

Lo que podes hacer es que al hacer click sobre alguno de los a del dropdown se dispare una funcion, la cual tome el valor del a click-eado y lo ponga en el value del <input/>

##Ejemplo:

$('#opcionesCodigoOrdenTrabajo > a').on('click', setDropdownValue);

function setDropdownValue() {
  let $option = $(this); 
  // Buscamos el input donde establecer el valor de la opcion seleccionada
  $option.closest('.input-group').find('input').val($option.text());
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="input-group">
  <input type="text" class="form-control" name="codigoOrdenTrabajo" style="width: 65px" minlength="5" maxlength="5">
  <div class="input-group-append">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu" id="opcionesCodigoOrdenTrabajo">
      <a class="dropdown-item" href="#">Valor 1</a>
      <a class="dropdown-item" href="#">Valor 2</a>
    </div>
  </div>
</div>

Lo que podes hacer es que al hacer click sobre alguno de los a del dropdown se dispare una funcion, la cual tome el valor del a click-eado y lo ponga en el value del <input/>

Ejemplo:

$('#opcionesCodigoOrdenTrabajo > a').on('click', setDropdownValue);

function setDropdownValue() {
  let $option = $(this); 
  // Buscamos el input donde establecer el valor de la opcion seleccionada
  $option.closest('.input-group').find('input').val($option.text());
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="input-group">
  <input type="text" class="form-control" name="codigoOrdenTrabajo" style="width: 65px" minlength="5" maxlength="5">
  <div class="input-group-append">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu" id="opcionesCodigoOrdenTrabajo">
      <a class="dropdown-item" href="#">Valor 1</a>
      <a class="dropdown-item" href="#">Valor 2</a>
    </div>
  </div>
</div>

Origen Enlace
Marcos
  • 35.6k
  • 7
  • 36
  • 70

Lo que podes hacer es que al hacer click sobre alguno de los a del dropdown se dispare una funcion, la cual tome el valor del a click-eado y lo ponga en el value del <input/>

##Ejemplo:

$('#opcionesCodigoOrdenTrabajo > a').on('click', setDropdownValue);

function setDropdownValue() {
  let $option = $(this); 
  // Buscamos el input donde establecer el valor de la opcion seleccionada
  $option.closest('.input-group').find('input').val($option.text());
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="input-group">
  <input type="text" class="form-control" name="codigoOrdenTrabajo" style="width: 65px" minlength="5" maxlength="5">
  <div class="input-group-append">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu" id="opcionesCodigoOrdenTrabajo">
      <a class="dropdown-item" href="#">Valor 1</a>
      <a class="dropdown-item" href="#">Valor 2</a>
    </div>
  </div>
</div>