1

Tengo un SELECT que al desplegarlo y seleccionar la opción, manda el valor a un INPUT text. El tema es que quiero que el boton SELECT no cambie el nombre, es decir, que ponga TYPE siempre:

<div class="input-group-btn">
<select type="button" name="type" class="btn btn-default dropdown-toggle" id="dropdown" >
<option value="">Type</option>
<option value="Productivity">Productivity</option>
<option value="Customer Service">Customer Service</option>
<option value="Administration">Administration</option>
<option value="Computers">Computers</option>
</select>

</div>
<input type="text" id="mytext" class="form-control">

SCRIPT

var select = document.getElementById('dropdown');
select.addEventListener('change', function(event) {
  var select = event.target;
  var indiceSeleccionado = select.selectedIndex;
  var elementoSeleccionado = select.options[indiceSeleccionado];
  var texto = document.getElementById('mytext');

  texto.value = select.value;

})

2 respuestas 2

6

Lo único que te falta es resetear el valor del select:

var select = document.getElementById('dropdown');
select.addEventListener('change', function(event) {
  var select = event.target;
  var indiceSeleccionado = select.selectedIndex;
  var elementoSeleccionado = select.options[indiceSeleccionado];
  var texto = document.getElementById('mytext');

  texto.value = select.value;

  // Regresarlo a "Type" usando el value ""
  select.value = "";

})
<div class="input-group-btn">
  <select type="button" name="type" class="btn btn-default dropdown-toggle" id="dropdown" >
    <option value="">Type</option>
    <option value="Productivity">Productivity</option>
    <option value="Customer Service">Customer Service</option>
    <option value="Administration">Administration</option>
    <option value="Computers">Computers</option>
  </select>
</div>
<input type="text" id="mytext" class="form-control">

También es posible hacerlo usando el índice de la opción:

var select = document.getElementById('dropdown');
select.addEventListener('change', function(event) {
  var select = event.target;
  var indiceSeleccionado = select.selectedIndex;
  var elementoSeleccionado = select.options[indiceSeleccionado];
  var texto = document.getElementById('mytext');

  texto.value = select.value;

  // El índide de "Type"
  select.selectedIndex = 0;

})
<div class="input-group-btn">
  <select type="button" name="type" class="btn btn-default dropdown-toggle" id="dropdown" >
    <option value="">Type</option>
    <option value="Productivity">Productivity</option>
    <option value="Customer Service">Customer Service</option>
    <option value="Administration">Administration</option>
    <option value="Computers">Computers</option>
  </select>
</div>
<input type="text" id="mytext" class="form-control">

Ya que Type es la primera opción (empezando desde 0).

1
  • 1
    Perfecto, me ha sido de gran ayuda!
    – Vieira
    el 9 mar. 2018 a las 15:35
2

te dejo este ejemplo espero que sea lo que necesitas:

Ejemplo

saludos.

1
  • Muchas gracias, era lo que iba buscando...
    – Vieira
    el 9 mar. 2018 a las 15:35

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.