Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » VB Script

Pagine:

RSS

Menu a scelta multipla condizionato da una textbox

di: Roberto Naclerio 23 Novembre 2001

Quando si scrive un nuovo messaggio su Outlook e si inserisce il nome del destinatario, se questo è presente in rubrica, appare scritto dopo aver inserito le prime lettere del nome. Analogamente in molte applicazioni per la gestione dei clienti, si dà spesso la possibilità all'utente di inserire le prime lettere del nome di un cliente, ed ecco che questo appare.

Vediamo come ricreare questo effetto in una pagina WEB. Lo script si basa su un menu a scelta multipla che contiene un elenco di nomi, e su una textbox. Man mano che si digitano le lettere nella textbox, nel menu a tendina restano solo i nomi che iniziano con le lettere digitate.

Il primo passo è quello di caricare i valori da far apparire nel menu a tendina in un array. Se si conosce il numero di valori da inserire nel menu, si può usare un array statico; in generale però consiglio di usare un array dinamico, perchè rende più facile l'aggiunta o la cancellazione dei valori.

Per quanto possa sembrare senza senso l'uso di un array dinamico, si vedrà nella parte finale dell'articolo i motivi che hanno portato a questa scelta. Ora non ci resta che caricare questi valori all'interno di un campo SELECT. Questo campo va costruito dinamicamente. Per farlo, delimitiamo l'area dove vogliamo che appaia la lista con i tag: <div id="lista"></div> Adesso tramite la proprietà innerHTML andiamo a inserire il campo <select>

lista.innerHTML="<select name=""listaclienti"" size=""4"" id=""cliente"" style=""width:300""></select>"

Conviene assegnare una larghezza fissa al campo, in modo che non dipenda dal suo contenuto. Nell'esempio il campo mostrerà 4 risultati alla volta, ma il valore è indifferente: invece di funzionare come ListBox potrebbe essere usata come DropDown (per chi non conoscesse questi temini la ListBox quella che appare con l'esempio, la DropDown è quella che si avrebbe omettendo l'attributo size) Siamo giunti al caricamento della campo grazie a questo ciclo:

dim opt

for c=0 to ubound(clienti)
  set opt = document.createElement("<option>")
  opt.value=idclienti(c)
  opt.text=clienti(c)
  listaclienti.add opt
next

Affrontati i blocchi separatamente, ecco di seguito riassunto il codice:

<html>
<head>
<title>Menù</title>
<script language="VBScript">

dim clienti()
redim preserve clienti(0)
clienti(0)="ROSSI MARIO"
redim preserve clienti(1)
clienti(1)="ALBERTILUCA"
redim preserve clienti(2)
clienti(2)="GRIGI LUCA"
redim preserve clienti(3)
clienti(3)="NERI DARIO"
redim preserve clienti(4)
clienti(4)="VERDI GIUSEPPE"
redim preserve clienti(5)
clienti(5)="ROSSO ELISABETTA"
redim preserve clienti(6)
clienti(6)="BLU GANDOLFO"
redim preserve clienti(7)
clienti(7)="ROMA MIRELLA"
redim preserve clienti(8)
clienti(8)="MILANO MARCO"
redim preserve clienti(9)
clienti(9)="TORINO ANNA"
redim preserve clienti(10)
clienti(10)="PESCARA GIANNANDREA"
</script>
</head>
<body>

<div id="lista"></div>

<script language="vbscript">
lista.innerHTML = "<select name=""listaclienti"" size=""4"" id=""idtessera"" style=""width: 300""></select>"

for c=0 to ubound(clienti)
  dim opt
  set opt = document.createElement("<option>")
  opt.value=clienti(c)
  opt.text=clienti(c)
  listaclienti.add opt
next
</script>
</body>
</html>