Interaction and filling of fields with 2 select

0

I'm doing a fill-in form with two selections, but I want the second option to come up depending on the result of what I've selected in the first one, so it's going to be:

   <div class="form-group">
<label>Categoria: </label>
<select class="form-control" name="categoria">
    <option>Seleccione... </option>
    <option value="Bolsa de Trabajo">Bolsa de Trabajo</option>
    <option value="Compra y Venta">Compra y Venta</option>
</select>

    <div class="form-group">
<label>Subcategoria: </label>
<select class="form-control" name="subcategoria">
        <?php
        if(categoria == null){
        ?>
        <option>Seleccione... </option>
        <?php
        }else if(categoria == "Bolsa de Trabajo"){
        ?>
        <option>Seleccione... </option>
        <option>Busco Empleo</option>
        <?php
        }else if(categoria == "Compra y Venta"){
        ?>
        <option>Seleccione... </option>
        <option>Busco Producto</option>
        <?php
        }
        ?>
 </select>       

for example if in the first select I select buying and selling I want the second select to go out the options of looking for work as it is shown in the code, what should be corrected so that it can be achieved? Greetings

    
asked by marianorz 17.07.2018 в 02:34
source

1 answer

0

Bro, well here I'll leave you some code, which I think has what you need, from there to there it's just a matter of playing with the possibilities

your html code would be like this ...

<div class="form-group">
<label>Categoria: </label>
  <select class="form-control" id="categoria" name="categoria">
      <option>Seleccione... </option>
      <option  value="Bolsa de Trabajo">Bolsa de Trabajo</option>
      <option  value="Compra y Venta">Compra y Venta</option>
  </select>

  <div class="form-group">
  <label>Subcategoria: </label>
  <select id="Subcategoria" class="form-control" name="subcategoria">
      <option>Seleccione... </option>
   </select>
 </div>

and the code js would be this ....

<script>
$(document).ready(function(){

  $("#categoria").change(function(){

     var seleccion = document.getElementById("Subcategoria");
     var opcion = document.createElement("option");

    if ( $("#categoria").val() == "Bolsa de Trabajo") {

        opcion.value= 1;
        opcion.text = "Busco Empleo";
        seleccion.add(opcion);

    }else if ( $("#categoria").val() == "Compra y Venta") {

        opcion.value= 1;
        opcion.text = "Busco Producto";
        seleccion.add(opcion);
    }

  });

});
</script>

I hope it serves you and marks it as valid the answer. By: JJ

    
answered by 17.07.2018 в 03:25