Tengo dos menús desplegables de selección. El usuario debe seleccionar primero la categoría, luego se mostrará la opción de subcategoría en función de la primera selección. Si el usuario elige la categoría con el valor 3 , se mostrará la subcategoría con el valor de opción de 1, 2 , 3 . El valor de opción de 0 se ocultará/eliminará en la sub category .
Y si el usuario elige la categoría con la opción 0||1||2 , solo se mostrará other en la opción de subcategoría.
Cómo logro esto. ¿Tengo que usar la función ocultar para ocultar el valor?
$('#category').change(function() { let cat = $(this).val(); if (cat === '0' || cat === '1' || cat === '2') { console.log("other"); $("#sub_category").change(function() { $('#sub_category').children('option[value="1"]').hide(); $('#sub_category').children('option[value="2"]').hide(); $('#sub_category').children('option[value="3"]').hide(); }); } else { $("#sub_category").change(function() { $('#sub_category').children('option[value="0"]').hide(); }) console.log(cat); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="category" id="category"> <option value="0">Type A</option> <option value="1">Type B</option> <option value="2">Type C</option> </select> <select name="sub_category" id="sub_category"> <option value="" hidden>Select Sub Category</option> <option value="0">Other</option> <option value="1">Op1</option> <option value="2">Op2</option> <option value="3">Op3</option> </select>Esto es lo que he intentado pero no funciona
#category valor de #categoría y ejecutaré para que cada opción se muestre/oculte según el valor del gato.
Puede utilizar la siguiente demostración:
$('#category').change(function() { $("#sub_category").val(''); let cat = $(this).val(); $("#sub_category option").show(); if (cat == 3) { $("#sub_category option").each(function (index, item) { var value = parseInt($(item).val()); if ([0].includes(value)) { $(item).hide(); } }); } else { $("#sub_category option").each(function (index, item) { var value = parseInt($(item).val()); if ([1, 2, 3].includes(value)) { $(item).hide(); } }); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="category" id="category"> <option value="0">Type A</option> <option value="1">Type B</option> <option value="2">Type C</option> <option value="3">Value 3</option> </select> <select name="sub_category" id="sub_category"> <option value="">Select Sub Category</option> <option value="0">Other</option> <option value="1">Op1</option> <option value="2">Op2</option> <option value="3">Op3</option> </select>Su código JS debe tener este aspecto.
$('#category').change(function(e) { let cat = e.currentTarget.value; if (cat === '0' || cat === '1' || cat === '2') { $('#sub_category').children('option[value="0"]').show(); $('#sub_category').children('option[value="1"]').hide(); $('#sub_category').children('option[value="2"]').hide(); $('#sub_category').children('option[value="3"]').hide(); } else { $('#sub_category').children('option[value="1"]').show(); $('#sub_category').children('option[value="2"]').show(); $('#sub_category').children('option[value="3"]').show(); $('#sub_category').children('option[value="0"]').hide(); console.log(cat); } });