Quiero obtener un valor seleccionado en el formulario.
Supongamos que si selecciono la categoría "coche" de la subcategoría "nissan". Quiero este valor en php.
No valoro 1 y 1 porque no reconozco que valor se selecciona. Quiero nombre o valor único en mi archivo php.
Este es el archivo php en la misma página:
<?php if(isset($_POST['select1'])){ $select1 = $_POST['select1']; } if(isset($_POST['select2'])){ $select2 = $_POST['select2']; } ?> <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js </script> <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="post"> <select name="select1" id="select1"> <option value=""></option> <option value="1">car</option> <option value="2">phone</option> <option value="3">tv</option> </select> <select name="select2" id="select2"> <option value=""></option> <option value="1">toyota</option> <option value="1">nissan</option> <option value="1">bmw</option> <option value="2">Iphone</option> <option value="2">LG</option> <option value="2">Samsung</option> <option value="3">Philips</option> <option value="3">Samsung</option> </select> </form> </html> <script> $("#select1").change(function() { if ($(this).data('options') == undefined) { /*Taking an array of all options-2 and kind of embedding it on the select1*/ $(this).data('options', $('#select2 option').clone()); } var id = $(this).val(); var options = $(this).data('options').filter('[value=' + id + ']'); $('#select2').html(options); }); </script>Cualquier idea o sugerencia será bienvenida Gracias.
Puede eliminar la propiedad de value de todas sus opciones si desea recibir el texto en el servidor. Prueba esto
// get all categories and sub categories let categories = {}; $('#select2 option[data-category]').each(function(i, element){ let category = $(this).data('category'); // add category if( categories[category] == undefined ) categories[category] = []; // add sub category to category categories[category].push(element.textContent); // remove the option from the DOM element.remove(); }); // append related sub categories to #select 2 $("#select1").change(function() { let subs = categories[this.value] ?? []; // sub categories for selected category $('#select2').html('<option></option>').append(subs.map(txt => `<option>${txt}</option>`)); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="post"> <select name="select1" id="select1"> <option></option> <option>car</option> <option>phone</option> <option>tv</option> </select> <select name="select2" id="select2"> <option></option> <option data-category="car">toyota</option> <option data-category="car">nissan</option> <option data-category="car">bmw</option> <option data-category="phone">Iphone</option> <option data-category="phone">LG</option> <option data-category="phone">Samsung</option> <option data-category="tv">Philips</option> <option data-category="tv">Samsung</option> </select> </form>hmm, agregue el atributo de datos en la opción principal y proporcione un valor como data-parent = '1' y cambie value = 'car'
lo mismo que puedes hacer con child data-child='1' y value="toyota"
luego simplemente apunte al atributo de datos en js y elimine otras opciones de las opciones secundarias