0

que tal estoy tratando de realizar lo siguiente en un opcion select me muestre por ejemplo

pais mexico peru españa se selecciona mexico despliega comida -> tradicion->cultura y despues vulve a seleccionar comida-> platillos etc asi es como lo llevo ahorita

<div>
   <select id="primary">
      <option value="result">Resultado</option>
      <option value="country">Country</option>
   </select> 
   <select id="secondary">
   </select>
</div>

<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var options = {
        result: ["resultado 1","resultado 2","No contacto"],
        country : ["Spain","Germany","France"]
}

$(function(){
    var fillSecondary = function(){
        var selected = $('#primary').val();
        $('#secondary').empty();
        options[selected].forEach(function(element,index){
            $('#secondary').append('<option value="'+element+'">'+element+'</option>');
        });
    }
    $('#primary').change(fillSecondary);
    fillSecondary();
});

</script>

lo que necesito es que cuando este mi resultado en no contacto me diga otro opcion select el cual salga contestadora o fuera de linea

3
  • Has intentado algo para lograrlo? Commented el 7 oct. 2020 a las 16:17
  • Creo que lo que deseas hacer es select dinámicos, lo que tienes ahí es un select has intentado algo en javascript? Commented el 7 oct. 2020 a las 16:18
  • ya edite mi codigo
    – user161479
    Commented el 7 oct. 2020 a las 16:28

2 respuestas 2

0

Te dejo un ejemplo de como podrías hacerlo, lo que intentas es hacer un select dinamico, uso JS si deseas hacerlo en Jquery ya tendrías que adaptarlo igual a lo que usaras.

var pais = [
  {id:1,name:"peru"},
  {id:2,name:"mexico"},
  {id:3,name:"españa"}
]

var categorias = [
  {id:1,name:"comida peruana",idPais:1},
  {id:2,name:"tradiciones peruanas",idPais:1},
  {id:3,name:"cultura peruana",idPais:1},
  {id:4,name:"comida mexico",idPais:2},
  {id:5,name:"tradiciones mexico",idPais:2},
  {id:6,name:"cultura mexico",idPais:2},
  {id:7,name:"comida españa",idPais:3},
  {id:8,name:"tradiciones españa",idPais:3},
  {id:9,name:"cultura españa",idPais:3},
]

var subCategorias = [
  {id:1,name:"ceviche",idCategoria:1},
  {id:2,name:"aji de gallina",idCategoria:1},
  {id:3,name:"Inti Raymi",idCategoria:2},
  {id:4,name:"Sr de los Milagros",idCategoria:2},
  {id:5,name:"chavin",idCategoria:3},
  {id:6,name:"caral",idCategoria:3},
  {id:7,name:"tacos",idCategoria:4},
  {id:8,name:"tacos",idCategoria:4},
  {id:9,name:"tacos",idCategoria:5},
  {id:10,name:"tacos",idCategoria:5},
  {id:11,name:"tacos",idCategoria:6},
  {id:12,name:"tacos",idCategoria:6},
  {id:13,name:"torbe",idCategoria:7},
  {id:14,name:"torbe",idCategoria:7},
  {id:15,name:"torbe",idCategoria:8},
  {id:16,name:"torbe",idCategoria:8},
  {id:17,name:"torbe",idCategoria:9},
  {id:18,name:"torbe",idCategoria:9},
]


//creando los options de area
var paisSelect = document.getElementById('pais');
var categoriasSelect = document.getElementById('categorias');
var subCategoriasSelect = document.getElementById('subCategorias');

paisSelect.addEventListener("change", cargarCategorias);
categoriasSelect.addEventListener("change", cargarSubCategorias); 

pais.forEach(function(pais){
  let opcion = document.createElement('option')
  opcion.value = pais.id
  opcion.text = pais.name
  paisSelect.add(opcion)
})

function cargarCategorias(){
  categoriasSelect.options.length = 1;
  subCategoriasSelect.options.length = 1;
  categorias
  .filter(function (categoria){
      return categoria.idPais == this;
  }, paisSelect.value)
  .forEach(function(categoria){
    let opcion = document.createElement('option')
    opcion.value = categoria.id
    opcion.text = categoria.name
    categoriasSelect.add(opcion);
  });
}

function cargarSubCategorias(){
   subCategoriasSelect.options.length = 1;
   subCategorias
  .filter(function (subCategoria){
      return subCategoria.idCategoria == this;
  }, categoriasSelect.value)
  .forEach(function(subCategoria){
    let opcion = document.createElement('option')
    opcion.value = subCategoria.id
    opcion.text = subCategoria.name
    subCategoriasSelect.add(opcion);
  });
}
<label for="pais">Areas:</label>
<select id="pais">
  <option value="0">seleccione</option>
</select>
<br>

<label for="pais">Categorias:</label>
<select id="categorias">
  <option value="0">selecccione</option>
</select>
<br>

<label for="pais">Sub Categorias:</label>
<select id="subCategorias">
  <option value="0">selecccione</option>
</select>

3
  • eso me ayudo bastante disculpa y abusando de tu gentileza hay forma que pueda meter un calendario en sub categoria jeje y muchas gracias
    – user161479
    Commented el 7 oct. 2020 a las 16:37
  • En ese caso dentro del select se ve complicado, pero podrías hacer un input que mientras se escoja determinada categoría se muestre dicho input y en otro caso se oculte, tambien puedes manejarlo dinamicamente. Commented el 7 oct. 2020 a las 16:42
  • y lo agrego asi--> {id:3,name:<input type="datetime-local"> ,idCategoria:2},
    – user161479
    Commented el 7 oct. 2020 a las 16:45
0
  1. action="#" donde esta el # va action="ejemploPost1.php" y luego en esa pagina tu recibes el valor.
  2. en select falta name="pais" para que recibas el valor ej:

$pais= $_POST["pais"]; for ($i=0;$i<count($pais);$i++)
echo "
pais" . $i . ": " . $pais[$i];

1
  • a ok vale gracias disculpa pero si quiero guardar iun input tipe date time no me aparee como input lo guardo asi--> {id:3,name:<input type="datetime-local"> ,idCategoria:2},
    – user161479
    Commented el 7 oct. 2020 a las 17:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.