Select option multiple javascript

[leo_search1]

Hola a todos soy nuevo en javascript y tengo esta pregunta concisa de ¿Como podría crear un select option múltiple estilo optgroup con javascript?
Únicamente que con este estilo o tipo:


En el form, la lista izquierda estaria echa con datos de un select file multiple preexistente mediante $_POST, y la sub fila, sub menu o segunda fila a la derecha, de un segundo select file multiple igualmente previo.

Es para seleccionar cada objeto de la izquierda por individual o separado y añadirle características de las sub opciones. Quedaria impreso en arrays que mostrarían un resultado por opcion de acuerdo a sus características seleccionadas, pero no se como seria con javascript.

Podrían guiarme totalmente?

[kraneok]

Con la propiedad multiple del tag select ¿no te vale?.

Saludos!

[leo_search1]

Iniciado por kraneok

Con la propiedad multiple del tag select ¿no te vale?.

Saludos!

Estoy tratando de hacer lo siguiente, pero similar a la imagen que muestro anteriormente, y recibiendo cada resultado por separado, pero todo llega en un solo Array.

>>> PAGINA AQUI <<<

Código PHP:

  <?php
 
 
$arrYourArray = array(
    "0" => "Elije para el grupo 1",
    "1" => "Elije para el grupo 2",
    "2" =>"Elije para el grupo 3");
print_r($arrYourArray);
?>
 
<form name="formu" id="formu" action="war.php" method="post" enctype="multipart/form-data">
 
    <dt><label>Accesorios opcional</label></dt>
    <input type="file" multiple id="arc" name="archivos[]" /><br />
    <?php
 
 
    for($i = 0; $i < 3; $i++) {
        echo '<select name="country[]" multiple>';
 
 
            echo '<optgroup label="' . $arrYourArray[$i] . '">';
 
            foreach ($_FILES['archivos']['name'] as $value) {
                $select = '<option name="optin[]" value="' . $value . '">' . $value . '</option>'; //close your tags!!
                echo $select;
 
 
            }
            echo '</optgroup>';
 
 
 
echo '</select>';
    }
 
    ?>
 
    <label>Prendas opcional</label>
 
    <input type="submit" value="Enviar" id="envia" name="envia" />
 
</form>
 
<?php
 
echo("<pre>");
print_r($_POST);
echo("<pre>");
 
?>   

¿Como podría solucionar esto? Estoy desesperado

[leo_search1]

Iniciado por kraneok

Con la propiedad multiple del tag select ¿no te vale?.

Saludos!

He cambiado en algo el codigo, aún así no se envian por separado.

>>>WEB AQUI<<<

Código PHP:

  <?php
 
 
$arrYourArray = array(
    "0" => "Elije para el grupo 1",
    "1" => "Elije para el grupo 2",
    "2" =>"Elije para el grupo 3");
print_r($arrYourArray);
?>
 
<form name="formu" id="formu" action="war.php" method="post" enctype="multipart/form-data">
 
    <dt><label>Accesorios opcional</label></dt>
    <input type="file" multiple id="arc" name="archivos[]" /><br />
    <?php
 
 
    for($i = 0; $i < 3; $i++) {
 
 
        echo '<select name="'.$i.'" multiple>';
 
 
            echo '<optgroup name="'.$arrYourArray[$i].'" label="' . $arrYourArray[$i] . '">';
 
            foreach ($_FILES['archivos']['name'] as $value) {
                $select = '<option name="'.$arrYourArray[$i].'" value="' . $value . '">' . $value . '</option>'; //close your tags!!
                echo $select;
 
 
            }
            echo '</optgroup>';
 
        echo '</select>';
 
    }
 
    ?>
 
    <label>Prendas opcional</label>
 
    <input type="submit" value="Enviar" id="envia" name="envia" />
 
</form>
 
<?php
 
for($i = 0; $i < 3; $i++) {
 
    echo("<pre>");
    print_r($_POST);
    echo("<pre>");
 
 
}
 
 
 
?>   

[Alexis88]

Para obtener un buen resultado, tendrías que hacer un <select> personalizado, utilizando HTML y CSS. Aquí puedes ver un ejemplo de cómo hacer y aquí un ejemplo para hacer un menú desplegable multinivel. Para marcar/desmarcar las opciones cada vez que se las seleccione/deseleccione, necesitarás trabajar con el evento click y asignarle ya sea estilos o una clase CSS a cada opción según esté marcada o desmarcada. Incluso podrías añadirle esa marca que indica que la opción ha sido seleccionada, utilizando el pseudoelemento :before.

Un saludo

[kraneok]

Bueno, creo realmente que es mucho mas sencillo de lo que lo estás planteando, te voy a poner una aproximación inicial y a ver si de esta forma eres capaz de sacar. Para este ejemplo vamos a utilizar capacidades de HTML5 como ponter atributos data.

Tenemos una lista con sublistas, donde la lista padre va a ser el grupo alimenticio por así decirlo y la segunda lista, los alimentos que están dentro de ese grupo. Para ello lo primero deberías hacer un menú desplegable, nada de usar tag select ni nada.

Código HTML:

<ul>
<ul class="food-list">
    <li data-food="Vegetables">Vegetables
        <ul>
            <li data-aliment="Lechuga">Lechuga</li>
            <li data-aliment="Cebolla">Cebolla</li>
        </ul>   
    </li>
    <li data-food="Pescados">Pescados
        <ul>
            <li data-aliment="Mero">Mero</li>
            <li data-aliment="Sardina">Sardina</li>
        </ul>
    </li>
    <li data-food="Frutas">Frutas</li>
</ul>
</ul>
 

Código Javascript:

var foodTypesDOM = $('.food-list').find ('[data-food]'); // Traemos todos los los data-food
    var foodTypes    = {};
 
    // 
    // Introducimos en foodTypes cada data-food
    // Es decir, tendremos foodTypes ["Vegetables"], foodTypes ["Pescados"], etc
    $.each (foodTypesDOM, function (index, element) {
        // Esto monta el array asociado al data-food
        // donde se almacenarán los alimentos
        foodTypes [$(element).data ('food')] = [];
    });
 
    //
    // Ahora añadiremos un evento click a la lista de grupos
    // alimenticios y solo captaremos los que se den sobre 
    // los que tienen el atributo aliment
    $('.food-list').on ('click', function (evt) {
        var $element = $(evt.target);
        //
        // Comprobamos que lo que se pulsa es un alimento
        if ($element.data ('aliment') !== undefined) {
            //
            // Buscamos el padre del alimento que ha pulsado
            // El padre puede ser Vegetables, Pescados, Frutas en este caso
            var parent = $element.parent().parent().data ('food');
 
            //
            // Ahora accedemos a nuestro objeto de grupos
            // alimenticios y vamos directamente al parent que haya
            // Es decir si en parent está Vegetables, foodTypes [parent] apunta
            // al array de Vegetables
            foodTypes [parent].push ($element.data ('aliment'));
        }
 
        console.log (foodTypes);
    });
 

Debes acabarlo tu. No tiene validaciones ni nada, si tienes dudas preguntame.
Gracias y saludos!