Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    211

    larghezza del tag <select>

    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>

  2. #2
    Moderatore di JavaScript L'avatar di br1
    Registrato dal
    Jul 1999
    Messaggi
    19,998
    Lo gestisci ovviamente con il CSS.
    Ti sposto
    Il guaio per i poveri computers e' che sono gli uomini a comandarli.

    Attenzione ai titoli delle discussioni: (ri)leggete il regolamento
    Consultate la discussione in rilievo: script / discussioni utili
    Usate la funzione di Ricerca del Forum

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    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.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  4. #4
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    211
    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>

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Quote Originariamente inviata da lanvoel Visualizza il messaggio
    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.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.