logo   PHP - Drop down menu (Select)




I form


En Drop-down menu er ikke i sig selv et input-felt i en form. Den er et hjælpeværktøj til Input-felter af text-typen. De har hhv. til formål at vise brugeren, hvilke data der er til rådighed i den aktuelle situation, og forhindre fejltastninger. Den er baseret på <SELECT>-taggen en enkelt gang yderst og <OPTION>-taggen flere gange indeni.


For hvert foreign-key-felt (fk_xxx) der skal kunne vedligeholdes (INSERT eller UPDATE) manuelt via en FORM, skal der anvendes en drop-down menu


Der kan også være behov for at anvende drop-down menuen i andre situationer.


'Name'- og 'value'-parametrene som FORM skal overføre til $_POST opbygges i hhv. <SELECT>-taggen ('name') og <OPTION>-taggen ('value'). TXT anvendes kun lokalt for at gøre option-dataene brugeregnede.
Option-dataene hentes fra den 'sekundære' tabel (se nedenfor).


Drop-down menu er uden sammenligning den mest komplekse funktionalitet, der anvendes i FORM.


En Drop-down menu anvendes til overføre data (fra sekundær til primær) mellem de 2 tabeller der udgør et "foreign key"-par.


I koden nedenfor er der anvendt følgende definitioner for de to tabeller og tekstfeltet fra den sekundære tabel:

  • row0
    Refererer til hovedudtrækker fra den primære tabel der indeholder fk_xxx_id feltet.
  • PRI
    Refererer til den primære tabel der indeholder fk_xxx_id feltet.
  • SEK
    Refererer til den sekundære tabel der indeholder valgmulighederne for indsættelse i den primære tabel.
  • TXT
    Det tekst-felt i den sekundære tabel, hvis indhold skal vises i drop-down menuen og i input-type strengen.


Ved brug af koderne nedenfor skal samtlige forekomster af 'pri', 'sek' og 'txt' ændres til aktuelle data.




Uden DB-tabel


I visse situationer kan drop-down data hardkodes på stedet uden behov for at hente dem fra en sekundær tabel. Opbygningen af drop-down menuen kan da blive en del simplere.


SELECT / INSERT


Drop-down knyttet til et numerisk DB-felt. Menuen er her relateret til DB-værdierne 0 og 1.


<fieldset class="form-group">
    <label for="labelnavn" class="col-sm-2">Labeltekst</label>
       <div class="col-sm-3">
      <select class="form-control" name="tabelfelt">
      <option value=" ">Vælg</option>
      <option value="0">Ja</option>
      <option value="1">Nej</option>
      </select>
    </div>
</fieldset>


UPDATE


Drop-down knyttet til et numerisk DB-felt. Den aktuelle feltværdi hentes fra det generelle select fra DB-recorden. Menuen er her relateret til DB-værdierne 0 og 1.


<fieldset class="form-group">
    <label for="labelnavn" class="col-sm-2">Labeltekst</label>
       <div class="col-sm-3">
       <select name="tabfelt" class="form-control">
          <?php
          if($tabfelt == 0)
          {$akt_txt = "Nej";}
          else
          {$akt_txt = "Ja";}
       echo $tabfelt;
       echo '<option value="'. $tabfelt . ' " > '. $akt_txt . ' </option> ' ;
          ?>
       <option value="0">Nej</option>
       <option value="1">Ja</option>
       </select>
    </div>
</fieldset>




Med DB-tabel


Anvendelsen af drop-down menu - 'enkelt select'-versionen - er et alternativ til 2 eller flere radioknapper eller en enkelt checkboks.


STAND ALONE


Udtræk af data


Ved STAND ALONE fra DB-tabel er der kun behov for udtræk af data til opbygning af drop-down menuen.


<?php
// Data til drop-down menu
$sek_query = "SELECT * FROM SEKtabel order by rol_navn asc";
$sek_result = mysqli_query($db_link, $sek_query) or die(mysqli_error($db_link));
$sek_antal = mysqli_num_rows ($sek_result);
?>


Anvendelse af data


Ved opbygning af en drop-down menu i til STAND ALONE kan denne kode (incl. form) bruges som grundmodel.


<form method='post'>
<table>
<?php
//Input linie
echo '<tr><td>Tekst i input type linien</td><td><select name="fk_SEK_id"><option value="0">Vælg fra menuen</option>';

//Drop-down menu
while ($sek_row = mysqli_fetch_assoc ($sek_result))
{ echo '<option value=" '. $sek_row['sek_id'] .' "> '. $sek_row['sek_txt'] .' </option>'; }
echo '</select></td></tr>';
echo '<tr><td> </td></tr>';
echo "<tr><td><input type='submit' name='rolle' value='Hent rolledata' /></td><td></td></tr>";
?>
</table>
</form>


Prepared statement





SELECT


Udtræk af data


Ved SELECT er der kun behov for udtræk af data til opbygning af drop-down menuen.


<?php // Data til drop-down menu
$sek_query = "SELECT * FROM SEKtabel order by felt_navn asc";
$sek_result = mysqli_query($db_link, $sek_query) or die(mysqli_error($db_link));
$sek_antal = mysqli_num_rows ($sek_result);
?>


Anvendelse af data


Ved opbygning af en drop-down menu i til SELECT kan denne kode bruges som grundmodel i tabelbaseret opbygning af FORM.


<?php
//Input linie
echo '<tr><td>Tekst i input type linien</td><td><select name="fk_SEK_id"><option value="0">Vælg fra menuen</option>';

//Drop-down menu
while ($sek_row = mysqli_fetch_assoc ($sek_result))
{ echo '<option value=" '. $sek_row['sek_id'] .' "> '. $sek_row['sek_txt'] .' </option>'; }
echo '</select></td></tr>';
?>


Prepared statement


<table> <?php
//Input linie
echo '<tr><td><select class="form-control" name="stm_niveau01"><option value="0">Vælg kategori</option>';

//Drop-down enkelt start
$sql = "SELECT distinct stm_niveau01 FROM stammenu order by stm_niveau01 asc";
$query = $db_link->prepare($sql);
$query->execute();
$query->store_result();
$query->bind_result($stm_niveau01);
while ($query->fetch())
{ echo '<option value=" '. $stm_niveau01 .' "> '. $stm_niveau01 .' </option>'; }
$query->close();
echo '</select></td></tr>';
//Drop-down enkelt slut
echo '<tr><td></td></tr>';
echo "<tr><td><input type='submit' name='submit' value='Hent kategori' /></td></tr>";
?>
</table>




INSERT


Udtræk af data


Ved INSERT er der behov for to udtræk af data:


1. Data fra den sekundære tabel til opbygning af drop-down menuen.


// Data til drop-down menu
$sek_query = "SELECT * FROM SEKtabel ORDER BY felt_navn asc";
$sek_result = mysqli_query($db_link, $sek_query) or die(mysqli_error($db_link));
$sek_antal = mysqli_num_rows ($sek_result);


2. Ved genvisning efter fejl: En enkelt record fra den sekundære tabel til indsættelse af starttekst i "input"-taggen.


// Data til tekst i "input"-taggen
if ($fejlbeskeder != "" and $fk_PRI_id != 0)
{
$sek2_query = "SELECT * FROM SEKtabel WHERE SEK_id = $fk_PRI_id";
$sek2_result = mysqli_query($db_link, $sek2_query) or die(mysqli_error($db_link));
$sek2_row = mysqli_fetch_assoc ($sek2_result);
$SEK2_TXT = $sek2_row['TXT'];
}


Anvendelse af data


Ved opbygning af en drop-down menu i en INSERT-situation kan denne kode bruges som grundmodel i tabelbaseret opbygning af FORM.


<?php
//Input linie
if ($fejlbeskeder != "")
{
echo '<tr><td>Tekst i input type-linien</td><td>';
echo '<select name="fk_PRI_id">';
    if ($fk_PRI_id == "")
    {
    $fk_PRI_id = $sek2_row['fk_PRI_id'];
    }
echo '<option value="'. $fk_PRI_id . ' " > '. $SEK2_TXT . ' </option> ' ;
}
else
{
echo '<tr><td>Tekst i input type-linien</td><td>';
echo '<select name="fk_PRI_id"><option value="0">Vælg fra menuen</option>';
}

//Drop-down menu
while ($sek_row = mysqli_fetch_assoc ($sek_result))
{
echo '<option value=" '. $sek_row ['sek_id'] .' "> '. $sek_row['sek_txt'] .' </option>';
}
echo '</select></td></tr>';
?>


Prepared statement


<?php
// DROP DOWN INSERT start
//Input linie
if ($fejlbeskeder != "")
{
    echo '<fieldset class="form-group">';
    echo '<label for="labelnavn" class="col-sm-2">Tekst i drop-down linien</label>';
    echo '<div class="col-sm-3">';
    echo '<select class="form-control" name="fk_PRI_id">';
    if ($fk_PRI_id !=0)
    {
       $sql_2 = "SELECT SEK_id, SEK_navn FROM SEK-tabel WHERE SEK_id = ?";
       $query_2 = $db_link->prepare($sql_2);
       $query_2->bind_param('i', $fk_PRI_id );
       $query_2->execute();
       $query_2->store_result();
       $query_2->bind_result($fk_PRI_id, $SEK_navn);
       $query_2->fetch();
       $query_2->close();
    }
    echo '<option value="'. $fk_PRI_id . ' " > '. $SEK_navn . ' </option> ' ;
    echo '</div>';
    echo '</fieldset>';
   }
else
{
    echo '<fieldset class="form-group">';
    echo '<label for="labelnavn" class="col-sm-2">Tekst i drop-down linien</label>';
    echo '<div class="col-sm-3">';
    echo '<select class="form-control" name="fk_PRI_id"><option value="0">Vælg fra menuen</option>';
    echo '</div>';
    echo '</fieldset>';
} // slut fejlbeskeder

//Drop-down menu
$sql = "SELECT SEK_id, SEK_navn FROM SEK-tabel order by SEK_navn asc";
$query = $db_link->prepare($sql);
$query->execute();
$query->store_result();
$query->bind_result($SEK_id, $SEK_navn);
    while($query->fetch()) {
       echo '<option value=" '. $SEK_id .' "> '. $SEK_navn .' </option>';
    }
$query->close();
echo '</select>';
// DROP DOWN INSERT slut
?>




UPDATE


Udtræk af data


Ved UPDATE er der behov for to udtræk af data:


1. Data fra den sekundære tabel til opbygning af drop-down menuen.


// Data til drop-down menu
$sek_query = "SELECT * FROM SEKtabel ORDER BY felt_navn asc";
$sek_result = mysqli_query($db_link, $sek_query) or die(mysqli_error($db_link));
$sek_antal = mysqli_num_rows ($sek_result);


2. Ved genvisning efter fejl: En enkelt record fra den sekundære tabel til indsættelse af starttekst i "input"-taggen.


// Data til tekst i "input"-taggen
$sek2_query = "SELECT * FROM SEKtabel WHERE SEK_id = $fk_PRI_id";
$sek2_result = mysqli_query($db_link, $sek2_query) or die(mysqli_error($db_link));
$sek2_row = mysqli_fetch_assoc ($sek2_result);
$SEK2_TXT = $sek2_row['TXT'];


Anvendelse af data


Ved opbygning af en drop-down menu i en UPDATE-situation kan denne kode bruges som grundmodel i tabelbaseret opbygning af FORM.


<?php
//Input linie
echo '<tr><td>Tekst i input type-linien</td><td>';
echo '<select name="fk_PRI_id">';
echo '<option value=" '. $sek2_row['sek_id'] . ' " > '. $SEK2_TXT . ' </option> ' ;

// drop-down menu
while ($sek_row = mysqli_fetch_assoc ($sek_result))
{
echo '<option value=" '. $sek_row ['sek_id'] .' "> '. $sek_row['sek_txt'] .' </option>';
}
echo '</select></td></tr>';
?>


Prepared statement


<?php
// drop-down update start
// formlinie
echo '<fieldset class="form-group">';
echo '<label for="labelnavn" class="col-sm-2">Tekst i drop-down linien</label>';
echo '<div class="col-sm-3">';
echo '<select class="form-control" name="fk_PRI_id">';
    $sql2 = " SELECT SEK_id, SEK_navn FROM SEK-tabel WHERE SEK_id = ?";
    $query2 = $db_link->prepare($sql2);
    $query2->bind_param('i', $fk_PRI_id );
    $query2->execute();
    $query2->store_result();
    $query2->bind_result($fk_PRI_id, $SEK_navn);
    $antal = $query2->num_rows;
    $query2->fetch();
    $query2->close();
echo '<option value=" '. $fk_PRI_id . ' " > '. $SEK_navn . ' </option> ' ;
echo '</div>';
echo '</fieldset>';

// dropdown menu
    $sql = "SELECT SEK_id, SEK_navn FROM SEK-tabel ORDER BY SEK_navn asc";
    $query = $db_link->prepare($sql);
    $query->execute();
    $query->store_result();
    $query->bind_result($fk_PRI_id, $SEK_navn);
       while ($query->fetch())
       {
       echo '<option value=" '. $fk_PRI_id .' "> '. $SEK_navn .' </option>';
       }

$query->close();
echo '</select>';
// - drop-down update slut
?>




Oversigtsskema


Primær tabelPRI                                                        
Sekundær tabelSEK
URL parameterPRI_id
Selekt namefk_PRI_id
Option value$fk_PRI_id
Option tekst$sek2_txt
DD-menu value$sek_row[sek_id]
DD-menu tekst$sek_row[sek_txt]
$_POSTfk_PRI_id
UPDATEPRI_id




Multi select


Anvendelsen af drop-down menu - 'multi select'-versionen - er et alternativ til 2 eller flere checkbokse.


Taggen 'select' ændres fra:

<select name="fk_SEK_id">


Til:

<select name="valgfrit navn[]" multiple="multiple">

Det er vigtigt at status ændres til array. Dette indebærer at '$_POST'-dataen skal læse med en 'foreach'-løkke i stedet for en 'while'-løkke.


Udover ovennævnte ændring opbygges multi-select på samme måde som enkelt-select.


De enkelte punkter i menuen vælges ved at trykke 'Ctrl' og vælge de relevante enkeltvis.





















x
x