Visualizzare n select in base alla scelta dalla select principale

**Artack** · 28-04-2019, 19:25

Salve. vorrei che a seconda della scelta nella select principale si visualizzassero
ho questa select:

codice:

<select name="quantita" class="form-control" required="required">
        <option value="1" selected="selected">1 mouse pad</option>
        <option value="2">2 mouse pad</option>
        <option value="3">3 mouse pad</option>
</select>

Siccome scegliendo più di un mouse si possono scegliere colori diversi per ognuno, vorrei che cliccando sulla option "1 mouse pad" si visualizzasse una select dei colori:

codice:

<select name="colore1" class="form-control">
    <option value="blu">Blu</option>
    <option value="nero">Nero</option>
    <option value="grigio">Grigio</option>
</select>

se si seleziona la option "2 mouse pad" si visualizzino 2 select per i colori:

codice:

<select name="colore1" class="form-control">
    <option value="blu">Blu</option>
    <option value="nero">Nero</option>
    <option value="grigio">Grigio</option>
</select>

<select name="colore2" class="form-control">
    <option value="blu">Blu</option>
    <option value="nero">Nero</option>
    <option value="grigio">Grigio</option>
</select>

se si seleziona la option "3 mouse pad" si visualizzino 3 select per i colori

codice:

<select name="colore1" class="form-control">
    <option value="blu">Blu</option>
    <option value="nero">Nero</option>
    <option value="grigio">Grigio</option>
</select>

<select name="colore2" class="form-control">
    <option value="blu">Blu</option>
    <option value="nero">Nero</option>
    <option value="grigio">Grigio</option>
</select>

<select name="colore3" class="form-control">
    <option value="blu">Blu</option>
    <option value="nero">Nero</option>
    <option value="grigio">Grigio</option>
</select>

Come posso fare?

Grazie

**vic53** · 03-05-2019, 21:35

guarda se ti va bene cosi...

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Senza nome 1</title>
<script type="text/javascript" language="javascript">
function VisDiv(ind) {
for (var i=1;i<4;i++){
 if (i==ind){
  document.getElementById("div"+i).style.visibility="visible";
  }
 else
  {
  document.getElementById("div"+i).style.visibility="hidden";
  }
 }
}
</script>
</head>

<body>
<select name="quantita" class="form-control" required="required" onchange="VisDiv(this.value)">
        <option value="1" selected="selected">1 mouse pad</option>
        <option value="2">2 mouse pad</option>
        <option value="3">3 mouse pad</option>
</select>

<div id="div1" style="visibility: visible;">
<select name="colore1" class="form-control">
    <option value="blu">Blu</option>
    <option value="nero">Nero</option>
    <option value="grigio">Grigio</option>
</select>
</div>

<div id="div2" style="visibility: hidden;">
<select name="colore1" class="form-control">
    <option value="blu">Blu</option>
    <option value="nero">Nero</option>
    <option value="grigio">Grigio</option>
</select>

<select name="colore2" class="form-control">
    <option value="blu">Blu</option>
    <option value="nero">Nero</option>
    <option value="grigio">Grigio</option>
</select>
</div>

<div id="div3" style="visibility: hidden;">
<select name="colore1" class="form-control">
    <option value="blu">Blu</option>
    <option value="nero">Nero</option>
    <option value="grigio">Grigio</option>
</select>

<select name="colore2" class="form-control">
    <option value="blu">Blu</option>
    <option value="nero">Nero</option>
    <option value="grigio">Grigio</option>
</select>

<select name="colore3" class="form-control">
    <option value="blu">Blu</option>
    <option value="nero">Nero</option>
    <option value="grigio">Grigio</option>
</select>
</body>
</div>

</html>

Discussione: Visualizzare n select in base alla scelta dalla select principale

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzare n select in base alla scelta dalla select principale

Permessi di invio