Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2012
    Messaggi
    771

    JQUERY mostrare le opzioni di una select simulando il click

    Ciao a tutti,

    è possibile simulare un click su una select, per vederne le opzioni direttamente da jquery, come se l'utente avesse fatto click?
    Ho un campo input di ricerca, in base al campo di ricerca mostro o nascondo i campi option, es:

    L'utente scrive nel campo input di ricerca 'a', al rilascio del tasto nel campo input, evento keyup, percorro le option della select, se l'option non contiene la lettera a dopo il keyup, la nascondo.
    La select è questa:
    codice:
    <select>
    <option value="aa">aa</option>
    <option hidden value="bb">bb</option>
    <option value="ccaa">ccaa</option>
    </select>
    Il problema è che vorrei che si mostrasse la select come se l'utente avesse fatto click su di essa, è possibile?


    Grazie,
    Roberto

  2. #2
    Possiblissimo con jquery e select2 (un piccolo plugin)
    Io uso questa funzione
    codice:
    function render_special_select(divname, classname, is_id, width) {
        if (width != undefined) {
            var larg = width;
        } else {
            var larg = "150px !important";
        }
        if (is_id) {
            jquery_element = $('#' + divname);
        } else {
            jquery_element = $(divname);
        }
        jquery_element.select2({
            containerCssClass : classname,
            dropdownCssClass : classname + "_results",
            minimumResultsForSearch : 5,
            allowClear : true,
            enabled: true,
            placeholder : "Scegli...",
            formatNoMatches : function(term) {
                return "Nessuna corrispondenza trovata";
            },
            formatSearching : function() {
                return "Ricerca in corso...";
            },
            width : larg
        });
    }
    che aggancio a una normale select html
    codice:
    <div id="contenitore_drop_down_ID_Tipo_Record_lista" >        
    <select id="drop_down_ID_Tipo_Record_lista" name="drop_down_ID_Tipo_Record_lista"  size="25"  class="">            
    <option value="22" >Fattura Emessa</option>
    <option value="30" >Prevetivo Attivo</option>
    <option value="31" >Proforma Attivo</option>
    <option value="23" >Fattura Ricevuta</option>
    <option value="62" >Nota di Credito</option>
    <option value="430" >Nota di Credito Ricevuta</option>
    <option value="429" >Ddt</option>
    <option value="0" selected="selected">Tutti</option>
    </select>
    </div>
    e poi la richiamo via js con
    codice:
    render_special_select('#contenitore_drop_down_ID_Tipo_Record_lista select', 'new_drop_down', false);
    Questo in pratica crea una "nuova" select che ha incorporato un campo di ricerca e, mentre digiti, "toglie" tutte le opzioni della select che NON contengono quello che stai digitando.
    Credo che sia più o meno quello che stai cercando.
    Vedi https://select2.org/appearance#example
    Ultima modifica di Dascos; 21-05-2021 a 15:52

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2012
    Messaggi
    771
    Quote Originariamente inviata da Dascos Visualizza il messaggio
    Possiblissimo con jquery e select2 (un piccolo plugin)
    Io uso questa funzione
    codice:
    function render_special_select(divname, classname, is_id, width) {
        if (width != undefined) {
            var larg = width;
        } else {
            var larg = "150px !important";
        }
        if (is_id) {
            jquery_element = $('#' + divname);
        } else {
            jquery_element = $(divname);
        }
        jquery_element.select2({
            containerCssClass : classname,
            dropdownCssClass : classname + "_results",
            minimumResultsForSearch : 5,
            allowClear : true,
            enabled: true,
            placeholder : "Scegli...",
            formatNoMatches : function(term) {
                return "Nessuna corrispondenza trovata";
            },
            formatSearching : function() {
                return "Ricerca in corso...";
            },
            width : larg
        });
    }
    che aggancio a una normale select html
    codice:
    <div id="contenitore_drop_down_ID_Tipo_Record_lista" >        
    <select id="drop_down_ID_Tipo_Record_lista" name="drop_down_ID_Tipo_Record_lista"  size="25"  class="">            
    <option value="22" >Fattura Emessa</option>
    <option value="30" >Prevetivo Attivo</option>
    <option value="31" >Proforma Attivo</option>
    <option value="23" >Fattura Ricevuta</option>
    <option value="62" >Nota di Credito</option>
    <option value="430" >Nota di Credito Ricevuta</option>
    <option value="429" >Ddt</option>
    <option value="0" selected="selected">Tutti</option>
    </select>
    </div>
    e poi la richiamo via js con
    codice:
    render_special_select('#contenitore_drop_down_ID_Tipo_Record_lista select', 'new_drop_down', false);
    Questo in pratica crea una "nuova" select che ha incorporato un campo di ricerca e, mentre digiti, "toglie" tutte le opzioni della select che NON contengono quello che stai digitando.
    Credo che sia più o meno quello che stai cercando.
    Vedi https://select2.org/appearance#example
    ...sì, è proprio quello che cerco.
    Ma dove trovo il plugin da scaricare?
    ...nel link che mi hai inviato mostra come usarlo ma non dove scaricarlo, o non lo vedo io...

    Io il campo input lo iniettavo direttamente con la presenza di una specifica classe, dovrò fare lo stesso con questo sistema, anche perché ne ho più di una di select.
    Inoltre ho select che si aggiungono dinamicamente al codice html, quindi sarà leggermente più complicato.
    Farò in modo che si inietti col nuovo metodo.

  4. #4
    Il plugin lo trovi su https://github.com/select2/select2/releases

    Una volta capito come funziona, diventa facile da usare e customizzare....se hai più selectbox ti conviene renderle Select2 usando delle variabili js, del tipo
    codice:
    function rendiSelectDinamica(div_name){
    $("#" + div_name).select2( .... );
    }
    
    function recuperaSelectDinamica(div_name){
    return $("#" + div_name);
    }
    la seconda funzione poi la puoi usare, per esempio, per "annullare" le selezioni
    codice:
    recuperaSelectDinamica('primaSelect').val(null).trigger('change');

  5. #5
    Utente di HTML.it
    Registrato dal
    May 2012
    Messaggi
    771
    Quote Originariamente inviata da Dascos Visualizza il messaggio
    Il plugin lo trovi su https://github.com/select2/select2/releases

    Una volta capito come funziona, diventa facile da usare e customizzare....se hai più selectbox ti conviene renderle Select2 usando delle variabili js, del tipo
    codice:
    function rendiSelectDinamica(div_name){
    $("#" + div_name).select2( .... );
    }
    
    function recuperaSelectDinamica(div_name){
    return $("#" + div_name);
    }
    la seconda funzione poi la puoi usare, per esempio, per "annullare" le selezioni
    codice:
    recuperaSelectDinamica('primaSelect').val(null).trigger('change');
    Ho implementato e funziona.
    Ho due problemi.
    1) Poniamo di avere questa select:
    codice:
    <select class="miaselect">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option> 
    </select>
    al caricamento della pagina eseguo:
    codice:
    $('.miaselect').select2();
    Ora, ho la necessità di clonare la select, quindi mi ritrovo con il codice html:
    codice:
    <select class="miaselect">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option> 
    </select>
    
    <select class="miaselect">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option> 
    </select>
    La prima select funziona la seconda no perché ovviamente il comando:
    codice:
    $('.miaselect').select2();
    l'ho eseguito al caricamento della pagina quando ancora non esisteva la seconda select, l'ho aggiunta dinamicamente, gli eventi registrati valgono solo per la prima select.
    Dovrei prima di clonare l'elemento annullare tutte le select2, clonare l'elemento e lanciare nuvamente il comando:
    codice:
    $('.miaselect').select2();
    É possibile annullare tutte le select, in modo che ritornino normali.

    2) Perché si vede cosi piccola la select? Utilizzo boostrap e la select occupa adesso la meta in altezza rispetto a prima.

    Grazie,
    Roberto

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 © 2021 vBulletin Solutions, Inc. All rights reserved.