Quiero hacer una opción de selección para el tamaño que depende de lo que la persona elija en una selección de categoría anterior. Básicamente, si la persona elige la categoría de ropa, la siguiente selección solo mostrará las tallas (S,M,L,XL) y si elige los zapatos, solo se mostrarán (33,34,44,42), se hace una idea.
Uso nodeJS y EJS como plantilla. NO estoy familiarizado con Jquery.
mi código:
<select id='inputStyle' name='category'> <option disabled='true'>Category</option> <option value='shoes'>Championes</option> <option value='shirts'>Camiseta</option> <option value=''>sweatshirts</option> <option value='others'>Otro</option> </select> </div> <div class='inputStyle'> <label for='size'> Size </label> <br> <select id='size' name='size'> <option value=''></option> <option value=''></option> <option value=''></option> <option value='others'></option> </select>Puedes hacerlo simplemente usando el siguiente código. Simplemente reemplace la lista de acuerdo a sus necesidades.
var sizeForShoes = ["40", "44", "42", "46", "50"]; var sizeForDress = ["S", "M", "L", "XL", "XXL"]; $('#Category').change(function() { var selectedCategory = $('#Category').val(); if(selectedCategory != ""){ //Removing current option $('#size').find('option').remove(); var sizeList = []; if(selectedCategory == 'shoes'){ for (var i = 1; i <= sizeForShoes.length; i++) { var shoeSize = sizeForShoes[i]; $('#size').append($("<option></option>").attr("value", shoeSize).text(shoeSize)); } } else{ for (var i = 1; i <= sizeForDress.length; i++) { var dressSize = sizeForDress[i]; $('#size').append($("<option></option>").attr("value", dressSize).text(dressSize)); } } }else{ //If nothing is selected then it will remove previous options $("#size").empty(); $('#size').append($("<option></option>").attr("value", "").text("Select size")); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="Category">Category</label> <select id="Category" name="Category" > <option value="">Select Category</option> <option value='shoes'>Championes</option> <option value='shirts'>Camiseta</option> <option value='sweatshirts'>sweatshirts</option> <option value='others'>Otro</option> </select><br><br> <label for="size">Size</label> <select id="size" name="size"> <option value="">Select size</option> </select>