Selezione di più elementi

**magic_key** · 10-02-2015, 11:45

Ciao a tutti, ho una listbox da cui seleziono elementi prelevati da un db; mi piacerebbe visualizzare gli elementi selezionati dalla stessa listbox come nell'esempio seguente:

Il concetto delle X possiamo trascurarlo perché saprei come risolvere.. Per il resto ho bisogno di un array e di un ciclo while che mi cattura gli elementi dall array, giusto? Grazie per i consigli

**Alhazred** · 10-02-2015, 12:34

Si fa con Javascript, non con PHP, altrimenti devi ricaricare la pagina ogni volta e se uno seleziona già più di 2 cose è molto fastidioso.

**magic_key** · 10-02-2015, 12:54

Ma poi potrò prelevare gli elementi selezionati con Javascript per registrarli su db? Alla fine mi serve per questo..

**Alhazred** · 10-02-2015, 12:58

Sì, con JS tieni traccia di ciò che è stato selezionato e alla pressione del pulsante submit attivi una funzione JS che invia i dati a PHP.

**magic_key** · 10-02-2015, 13:01

E se invece a fianco la listbox aggiungessi un pulsante di submit, riesco ad evitare Javascript? Non importa se devo ricaricare la pagina..

**carlomarx** · 10-02-2015, 15:22

Potresti evitare JavaScript se ti dessi una mano col CSS… ti mando un esempio scritto al volo (da rendere cool)…

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Records menu</title>
<style type="text/css">
fieldset.records-menu {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    border: none;
    margin: 0;
    padding: 36px 4px 4px 8px;
    background: yellow;
    overflow: visible;
}

fieldset.records-menu > nav {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: auto;
    z-index: 101;
    overflow: hidden;
    background: #ffffff;
    cursor: default;
    border-radius: 10px;
    border: 2px #cccccc solid;
    padding: 4px;
    margin: 0;
}

fieldset.records-menu > nav > * {
    display: block;
    width: auto;
    height: 20px;
    border: none;
    margin: 0;
    padding: 0;
}

fieldset.records-menu > nav legend {
    padding: 0 24px 0 0;
    min-width: 150px;
}

fieldset.records-menu > nav legend::after {
    width: 24px;
    content: "\2335";
    top: 0;
    right: 0;
    position: absolute;
    text-align: center;
    font-style: normal;
    cursor: default;
}

fieldset.records-menu > nav > label {
    padding: 1px;
}

fieldset.records-menu > nav > label:hover {
    background: #5555ff;
}

fieldset.records-menu ul {
    position: relative;
    left: 0;
    top: 0;
    list-style-type: none;
    z-index: 100;
    padding: 0;
    margin: 0;
}

fieldset.records-menu input[type="checkbox"],
fieldset.records-menu input[type="checkbox"] ~ span,
fieldset.records-menu > nav label {
    display: none;
}

fieldset.records-menu input[type="checkbox"]:checked ~ span,
fieldset.records-menu > nav:hover label {
    display: block;
}

fieldset.records-menu input[type="checkbox"] ~ span > label {
    color: #ff0000;
    font-weight: bold;
    cursor: pointer;
}
</style>
</head>

<body>

<form name="tuoForm" action="test.php">

    <fieldset class="records-menu">

        <nav>
            <legend>&mdash; seleziona elementi &mdash;</legend>
            <label for="elem1">Elemento #1</label>
            <label for="elem2">Elemento #2</label>
            <label for="elem3">Elemento #3</label>
            <label for="elem4">Elemento #4</label>
        </nav>

        <ul>
            <li>
                <input id="elem1" type="checkbox" name="nome_campo[]" value="valore1" />
                <span><label for="elem1" title="Rimuovi">✗</label> Selezionato #1</span>
            </li>
            <li>
                <input id="elem2" type="checkbox" name="nome_campo[]" value="valore2" />
                <span><label for="elem2" title="Rimuovi">✗</label> Selezionato #2</span>
            </li>
            <li>
                <input id="elem3" type="checkbox" name="nome_campo[]" value="valore3" />
                <span><label for="elem3" title="Rimuovi">✗</label> Selezionato #3</span>
            </li>
            <li>
                <input id="elem4" type="checkbox" name="nome_campo[]" value="valore4" />
                <span><label for="elem4" title="Rimuovi">✗</label> Selezionato #4</span>
            </li>
        </ul>

    </fieldset>

<form>

</body>
</html>

Il risultato non mi fa impazzire cmq…

**magic_key** · 10-02-2015, 17:02

Ciao Carlomarx, l'idea non è affatto male e ti ringrazio x lo sforzo!

Dovrei fare alcuni adattamenti, cioè visualizzare gli elementi che prelevo direttamente dal db e un'alternativa all "hover" dato che su smartphone e tablet è inutilizzabile.. Voglio provare una soluzione Javascript e credo rifarò la domanda nell'apposita sezione.. Grazie a tutti!

EDIT: mi sono accorto che il topic è stato spostato su Javascript, beh a questo punto non mi rimane da chiedere agli esperti: consigli?

**magic_key** · 12-02-2015, 18:05

Mi rendo conto che sto saltando da una sezione all'altra, ma con php c'è modo di implementare il seguente codice? Quanto segue semplicemente seleziona un elemento e lo mostra a video.. Mi ci vorrebbe qualcosa che "raccoglie" e mostra a video i dati selezionati..

codice:

<form method="post">
    <select name="list">
      <option value="">Seleziona un valore</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>

    <input name="submit" type="submit" value="Invia" />
</form>


<?php

if (isset($_POST['submit'])) {

    if (!empty($_POST['list'])) {
        echo 'Hai selezionato: ' . $_POST['list'];
    } else {
        echo "Seleziona un valore";
    }
}

?>

**cavicchiandrea** · 12-02-2015, 22:49

In php devi gestire le option con le session, come tutto il resto dei campi del form altrimenti tutte le volte che ricarichi il form per i dati

**magic_key** · 13-02-2015, 00:54

E se nel db creassi una tabella momentanea da utilizzare come "ponte" che raccoglie i dati e dopo l'uso si svuota? mmh.. cavolata?

Discussione: Selezione di più elementi

Strumenti discussione

Ricerca discussione

Visualizza

Selezione di più elementi

Permessi di invio