jQuery è una libreria JavaScript che fornisce potenti funzionalità per la gestione degli oggetti del browser. La sua sintassi è molto succinta. L'istruzione "$('div').hide();" si nasconde tutti gli oggetti di tag div, mentre "$(' div div').hide();" nasconde di div tutto doppio nidificato Nascondendo opzione nidificati tag in un elenco a discesa può essere utile se uno richiede solo opzioni specifiche per una situazione specifica. La sintassi "$(' selezionare option').hide();" funziona nel browser Firefox, ma non in Internet Explorer. I seguenti passaggi forniscono una soluzione costruendo dinamicamente l'elenco a discesa.

Istruzioni

1

Scaricare il file della libreria jQuery (jquery-1.5.1.min.js) da jQuery (Vedi risorse). Salvare questo file sul desktop.

2

Aprire Blocco note e copiare e incollare il codice seguente. Salva come "hideopts.html" sul tuo desktop.

< html >

< head >

< script type = ' text/javascript' src ='jquery-1.5.1.min.js' >< / script >

< / head >

3

Copiare e incollare il codice seguente nella parte inferiore della hideopts.html. Il "cibo var = {.};" istruzione crea una matrice di coppia del valore di chiave. Le chiavi sono "frutto", "dado" e "vegetale". "jQuery.fn.buildSelect=function(hidetype)" è la funzione che crea l'elenco a discesa. Il ciclo foreach esterna scorre ogni riga della matrice di dati e l'elenco di stringa viene assegnato alla variabile "stringlist." Se il tipo di valore, "frutta", non si verifica in "hidetype", o "hidetype" uguale a "showAll" controllo e passa nel ciclo foreach interno. Questo ciclo interno scorre ogni stringa in "stringlist" per costruire l'opzione elenco di goccia. Questa funzione viene chiamata dall'ultima riga in < script >... < / script > ambito.

< corpo >

< selezionare id = 'selectOptions' >< / selezionare >

< script >

cibo di var = {

"frutta": ["apple", "banana", "uva"],

"dado": ["mandorla", "pecan", "nocciola"],

"vegetale": ["pomodoro", "fungo", "pisello"]

};

jQuery.fn.buildSelect=function(hidetype) () {

$("#selectOptions").html("");

${.each(food,function(type,stringlist)

Se ((hidetype.search (tipo) = =-1) | | (hidetype = = "showAll")) {

ogni sequenza di $(stringlist, funzione (numero, stringval) {

$("#selectOptions").append ("< valore opzione ='" + stringval + "'>" + stringval + "</option");

});

}

});

}

$('#selectOptions').buildSelect('showAll');

< / script >

< / body >

< / html >

4

Copiare e incollare le seguenti righe sopra il tag < script > creare i due pulsanti che nascondere le opzioni di frutta e mostrare tutte le opzioni nell'elenco a discesa.

< tipo input = 'button' class = 'btn' id = 'frutta' valore = 'Nascondi frutta' / >

< tipo input = 'button' class = 'btn' id = 'showAll' value = 'Visualizza tutto' / >

5

Copiare e incollare la seguente riga di jQuery sopra il < / script > tag di fine. Si tratta di una funzione di evento, chiamata ogni volta che viene fatto clic su qualsiasi oggetto di classe "btn". Attributo id del pulsante input passa alla funzione creareSeleziona.

$('.btn').click(function() {$('#' + this.id).buildSelect(this.id)});

6

Copiare e incollare le seguenti righe alla fine della funzione "creareSeleziona", in modo che le opzioni sono ordinate, con la prima voce selezionata come opzione predefinita.

var sortedOptions = $.makeArray ($('selezionare l'opzione')) Sort (function (a, b) {

restituire a.text = = b. Text? 0: a.text < b. Text? -1: 1;

});

$("#selectOptions").html(sortedOptions);

.selectedIndex $("#selectOptions") [0] = 0;

7

Salvare hideopts.html. Provarlo aprendolo all'interno di un browser e cliccando sui pulsanti "Mostra tutti" e "Nascondi i frutti".

Consigli & Avvertenze

• Per nascondere più tipi di opzioni, come frutta e verdura, è possibile creare un nuovo pulsante aggiungendo la seguente riga.
• < tipo input = 'button' class = 'btn' id = 'frutta verdura' valore = 'Nascondi frutta e verdura' / >