Slik skjuler Valg i jQuery

April 24

jQuery er et Javascript-bibliotek som gir kraftige funksjoner for håndtering av leser stedene. Syntaksen er veldig konsis. Uttalelsen "$ ( 'div') skjule ();". skjuler alle div tag objekter, mens "$ ( 'div div') skjule ();". skjuler alle doble nestet div tallet. Hiding nestet opsjons koder i en dråpe liste kan være nyttig hvis man bare krever spesifikke alternativer for en bestemt situasjon. Syntaksen "$ ( 'velg alternativ') skjule ();". fungerer i nettleseren Firefox, men ikke i Internet Explorer. Følgende trinn gir en løsning ved å bygge på rullelisten dynamisk.

Bruksanvisning

1 Last ned jQuery biblioteket filen (jquery-1.5.1.min.js) fra jQuery (se Ressurser). Lagre denne filen på skrivebordet.

2 Åpne Notisblokk og kopier og lim inn følgende kode. Lagre dette som "hideopts.html" på skrivebordet.

<Html>

<Head>

</ Head>

3 Kopier og lim inn koden nedenfor på bunnen av hideopts.html. Den «var mat = {..};" uttalelsen skaper en nøkkelverdi par array. Tastene er "frukt", "nut" og "grønnsak". "JQuery.fn.buildSelect = function (hidetype)" er den funksjonen som bygger på rullelisten. De ytre foreach løkke gjentas gjennom hver rad i datalisten og tildeler strengen listen til variabelen "stringlist." Hvis verdien typen, "frukt", skjer ikke i "hidetype" eller "hidetype" likeverdige "showall" kontroll går inn i den indre foreach loop. Denne indre sløyfe gjentas gjennom hver streng i "stringlist" for å bygge rullelisten alternativet. Denne funksjonen kalles fra den aller siste linje i <script> .. </ script> omfang.

<Body>

Var mat = {

"Frukt": [ "eple", "banan", "drue"],

"Nøtt": [ "mandel", "pecan", "hasselnøtt"],

"Grønnsak": [ "tomat", "sopp", "ert"]

};

jQuery.fn.buildSelect = function (hidetype) {

$ ( "# Velger Valg") html ( ".");

$ .Hver (Mat, funksjon (type, stringlist) {

if ((hidetype.search (type) == - 1) || (hidetype == "showall")) {

$ .Hver (Stringlist, funksjon (antall, stringval) {

. $ ( "# Velger Valg") føyer ( "<option value = '» + stringval + "'>" + stringval + "</ option");

});

}

});

}

$ ( '# Velger Valg') buildSelect ( 'showall.');

</ Script>

</ Body>

</ Html>

4 Kopier og lim inn følgende linjer over <script> -taggen for å lage de to knappene som vil skjule frukt alternativer og vise alle alternativene i rullelisten.

5 Kopier og lim inn følgende jQuery linje over </ script> end tag. Dette er en hendelse funksjon, kalt når et objekt av klassen "btn" klikkes. Den passerer inngangsknappen id attributt til buildSelect funksjon.

. $ ( '. BTN') klikk (function () {$ ( '#' + this.id) .buildSelect (this.id)});

6 Kopier og lim inn følgende linjer på slutten av "buildSelect" funksjon slik at alternativene er sortert, med det første alternativet er valgt som standard alternativ.

Var sortedOptions = $ .makeArray ($ ( 'velg alternativ')). sort (funksjon (a, b) {

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

});

$ ( "# Velger Valg") HTML (sortedOptions.);

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

7 Lagre hideopts.html. Test det ved å åpne den i en nettleser og klikke på "skjule frukt" og "Vis alle" knappene.

Hint

Hvis du vil skjule flere typer alternativer, for eksempel frukt og grønnsaker, kan du opprette en ny knapp ved å legge til følgende linje.
<Input type = "knappen" class = "btn 'id =' frukt grønnsak" value = "hide veg og frukt" />