Crea sito

Pillole di jQuery – Recuperare un attributo dalle option di una select e modificare la selezione dall’esterno

| 15 marzo 2012 | 0 Comments

JQuery LogoUna delle difficoltà che ho riscontrato in jQuery lavorando con le drop-list è stata quella di ciclare i value di una lista e modificare dall’esterno la selezione. Qui sotto, tramite 5 semplici esempi mostrerò come recuperare i vari tipi di valori contenuti in una drop-down list html (o select che dir si voglia) e successivamente ne selezionerò una tramite un pulsante esterno.
Per prima cosa, logicamente dopo avere importato come al solito il framework jQuery nell’head della nostra pagina, impostiamo il codice della nostra lista. Per comodità userò un solo esempio di in cui è presente praticamente tutto.

  • Un attributo di nome “attributo” assegnato a ogni oggetto della lista
  • Un value contenente un numero da uno a quattro in inglese
  • Un oggetto della lista impostato come “selected” (il numero 3)
  • Un testo per ogni oggetto della lista (ovviemante)

Sotto la lista vi saranno, invece, 5 tasti con la descrizione di ciò che faranno. Ad ogni bottone è stato assegnato un id a cui, nel codice jQuery, è stato assegnata una funzione che fa quanto descritto.

<select id="list">
            <option attributo="1" value="one">Uno</option>
            <option attributo="2" value="two">Due</option>
            <option attributo="3" value="three" selected="selected">Tre</option>
            <option attributo="4" value="four">Quattro</option>
        </select>
        <br />
        <input id="button1" type="button" value="Cicla i testi di tutta la drop-down list" /><br />
        <input id="button2" type="button" value="Cicla i value di tutta la drop-down list" /><br />
        <input id="button3" type="button" value="Cicla gli attributi 'attributo' di tutta la drop-down list" /><br />
        <input id="button4" type="button" value="Mostra i value e attributo della opzione selezionata nella drop-down list" /><br />
        <input id="button5" type="button" value="Seleziona dall'esterno una voce della drop-down list dove attributo è uguale a 4" /><br />
            $(document).ready(function () {
                $("#button1").click(function(){
                    $("#list option").each(function() {
                        alert("text: "+$(this).text());
                    });
                });
                $("#button2").click(function(){
                    $("#list option").each(function() {
                        alert("value: "+$(this).val());
                    });
                });
                $("#button3").click(function(){
                    $("#list option").each(function() {
                        alert("attributo: "+$(this).attr("attributo"));
                    });
                });
                $("#button4").click(function(){
                    alert("value: "+$("#list option:selected").val());
                    alert("attributo: "+$("#list option:selected").attr("attributo"));
                });
                $("#button5").click(function(){
                    $("#list option").each(function() {
                        if ($(this).attr("attributo") == '4') {
                            $(this).attr("selected","selected");
                        }
                    });
                });
            });

Le funzioni sono simili fra loro. Nelle prime tre si ciclano le option contenute all’interno della drop-down list e si mostrano il text(), il val() e l’attributo, nella quarta funzione si mostrano il valore e l’attributo della voce selezionata, mentre nella quarta si imposta da remoto la selezione della voce voluta in base ad un ciclo di confronto sull’attributo delle singole option.

Qui potete trovare l’esempio funzionante del codice sopra citato

VN:F [1.9.22_1171]
Rating: 9.3/10 (3 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
Pillole di jQuery - Recuperare un attributo dalle option di una select e modificare la selezione dall'esterno, 9.3 out of 10 based on 3 ratings

Tags: , , , , , ,

Category: Informatica

About the Author ()

Leave a Reply