larghezza del tag <select>

**lanvoel** · 08-05-2018, 19:35

Per l'oggetto <select> c'è l'attributo size="n" con il quale si può scegliere il numero delle righe visibili; se le righe sono più di n compare il cursore della barra verticale che permette di renderle visibili.
Nell'esercizio che riporto la larghezza dell'oggetto select cambia con la lunghezza delle righe inserite o cancellate. Vorrei che la larghezza restasse costante e che eventualmente comparisse, all'occorrenza, un cursore di barra orizzontale analogo a quello della barra verticale.
Desidererei sapere se c'è anche un attributo che permetta di fissare la larghezza del tag select, o in pixel, o in numero di colonne. Grazie

lanvoel

codice:

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function p()
{  
  var posiz=document.modulo.menu.selectedIndex;
  alert("stai per eliminare: "+document.modulo.menu.options[posiz].text);
}
function togli()
{ 
  if(document.modulo.menu.length>0)
  document.modulo.menu.options.remove(document.modulo.menu.selectedIndex);  
}
function aggiungi()
{ 
  n=prompt("inserisci una nuova riga ","riga"); 
  var nuova_opzione=new Option(n);
  document.modulo.menu.options.add(nuova_opzione,document.modulo.menu.length); 
}
</SCRIPT>
</HEAD>
<BODY bgcolor="beige">
<center>
<FORM NAME="modulo">
<fieldset name="fieldset1" style="background-color:'yellow'; width:300px; height:300px; text-align:center">
<legend>vedi, togli, aggiungi righe</legend>
<br>
<SELECT size="10" NAME="menu" onchange="p()" STYLE="background-color:'aqua';color:'navy'">
<OPTION SELECTED>Scegli una riga :</OPTION>
<OPTION>riga1</OPTION>
<OPTION>riga2</OPTION>
<OPTION>riga3</OPTION>
</SELECT>
<BR><br><br>
<INPUT TYPE="button" VALUE="cancella" onclick="togli()">
<br><br>
<INPUT TYPE="button" value="aggiungi" onclick="aggiungi()">
</fieldset>
</FORM>
</center>
</BODY>
</HTML>

**br1** · 08-05-2018, 22:09

Lo gestisci ovviamente con il CSS.
Ti sposto

**KillerWorm** · 08-05-2018, 23:21

Chiaro, puoi impostargli la proprietà width allo stesso modo di come hai già fatto, ad esempio, per l'elemento <fieldset>.

PS: occhio, il tuo codice presenta vari errori strutturali e sintattici che lo rendono non valido. In una tua precedente discussione già lo avevo fatto, non vorrei essere ripetitivo ma il consiglio resta sempre quello di utilizzare un validatore (vedi questo) per controllare e correggere tutti gli eventuali errori così da ottenere un codice valido a tutti gli effetti.
Buon proseguimento.

**lanvoel** · 09-05-2018, 09:28

Grazie KillerWorm per aver insistito per l'uso del validatore che, smemorato e pigro, non usavo. Con esso ho corretto tutti errori del codice in esame.

lanvoel

codice:

<!doctype html>
<html lang="it">
<head>
<title>Prove tag select </title>
<script>
function spostaOpzioni(direzione)
{
   var i=0;
   with (document.modulo)
   {
      if (direzione)
      {
       for(i=0; i<menu1.length; i++)
       {
         if(menu1.options[i].selected)
        {
         var opt=new Option(menu1.options[i].text);
           menu2.options.add(opt,menu2.length);
           menu1.options.remove(i);
         }
      }
     }
      else
      {
       for(i=0; i<menu2.length; i++)
       {
         if(menu2.options[i].selected)
        {
           var opt=new Option(menu2.options[i].text);
           menu1.options.add(opt,menu1.length);
           menu2.options.remove(i);
        }  
       }    
      }
   }
}
</script>
</head>
<body>
<form name="modulo">
<table style="background:#fbceb1; border: 2px solid gray;">
<tr><td style="text-align:center;">
<select size="10" name="menu1" style="width:180px" ondblclick="spostaOpzioni(true)">
<option> Elemento 1</option>
<option> Elemento 2_9876543210_9876543210</option>
<option> Elemento 3</option>
<option> Elemento 4</option>
<option> Elemento 5</option>
</select></td>
<td style="text-align:center;">
<select size="10" name="menu2" style="width:180px" ondblclick="spostaOpzioni(false)">
<option> Elemento 6</option>
</select></td>
<tr><td style="text-align:center; width:200px;">
<input type="button" value=" >> " onclick="spostaOpzioni(true)"></td>
<td style="text-align:center; width:200px;">
<input type="button" value=" << " onclick="spostaOpzioni(false)"></td>
</tr>
</table>
</form>
</body>
</html>

**KillerWorm** · 09-05-2018, 10:39

Originariamente inviata da lanvoel

Grazie KillerWorm per aver insistito per l'uso del validatore che, smemorato e pigro, non usavo. Con esso ho corretto tutti errori del codice in esame.

Discussione: larghezza del tag <select>

Strumenti discussione

Ricerca discussione

Visualizza

larghezza del tag <select>

Permessi di invio