How to do that when selecting an option in a combobox I will restore it again

0

Hello good afternoon I have a combobox which I need when I select for example plate crane, plate basket, motorcycle plate, vehicle plate. and fill the plate in the input text then I give it to the plate and restore the main option that is the first option that is blank

<select class="form-control" id="tipo_vehiculo">
               <option value=""></option>
                <option value="grua">placa grua</option>
                <option value="canasta">placa canasta</option>
                <option value="moto">placa moto</option>
                <option value="vehiculo">placa vehiculo</option>                 
                </select>
                <em></em>
                <br>
  <center><input type="text"  class="control-label"  id="placa" disabled></center>
  <input type="button" value="Subir placa"  id="btncreartipovehiculo" />
    
asked by JSACTM Music 01.10.2018 в 23:50
source

2 answers

0

You can select the first element by changing the selected property, in case your select or combo is not multiple you can do the following:

<input type="button" value="Subir placa"  id="btncreartipovehiculo" onclick="subir()" />
  <script>
    var subir = function(){
        var combo = document.querySelector("#tipo_vehiculo");
        combo.querySelector("option").setAttribute("selected", "selected");
    }
  </script>

If your selects is multiple you can do the following:

 <input type="button" value="Subir placa"  id="btncreartipovehiculo" onclick="subir()" />
  <script>
    var subir = function(){
        var combo = document.querySelector("#tipo_vehiculo");
        var options = combo.querySelectorAll("option:checked");
        options.forEach(function(item){
            item.selected = false;
        });
        combo.querySelector('option').selected = true;
    }
  </script>
    
answered by 02.10.2018 в 14:59
0

Add a EventListener to the click of your button, when you click get the ComboBox and the selectedIndex place it in -1 so select clean the selection.

document.getElementById("btncreartipovehiculo").addEventListener('click', function(event) {
  document.getElementById("tipo_vehiculo").selectedIndex = -1;
});
<select class="form-control" id="tipo_vehiculo">
  <option value=""></option>
  <option value="grua">placa grua</option>
  <option value="canasta">placa canasta</option>
  <option value="moto">placa moto</option>
  <option value="vehiculo">placa vehiculo</option>                 
</select>
<em></em>
<br />
<center>
  <input type="text" class="control-label" id="placa" disabled />
</center>
  <input type="button" value="Subir placa" id="btncreartipovehiculo" />
    
answered by 02.10.2018 в 15:28