Keep a fixed label on select

Question

Keep a fixed label on select

Navigation

#1 by (6 votes)
#2 by (2 votes)

1

I have a SELECT that when displayed and select the option, sends the value to an INPUT text. The issue is that I want the SELECT button to not change the name, that is, to always type TYPE:

<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;

})

javascript html

asked by Vieira 09.03.2018 в 16:21

source

2 answers

2

I leave this example I hope it is what you need:

Example

Greetings.

answered by 09.03.2018 в 16:25

Separate a url with Javascript and save it in a variable 'if' with a boolean that does not act according to the [closed] documentation

score 6 · Accepted Answer

The only thing you need is to reset the value of the 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">

It is also possible to do it using the index of the option:

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">

Since Type is the first option (starting from 0).