Chiudere un elenco a discesa SELECT in modo programmatico con Javascript/jQuery

Question

Ho un menu a discesa inizializzato con un singolo valore. Quando l'utente fa clic su di esso, il singolo elemento viene rimosso e viene aggiunto un nuovo elemento che dice "Caricamento", quindi viene inviata una chiamata AJAX al server e quando viene restituito, i nuovi valori vengono aggiunti al controllo.

Il problema è che il controllo rimane aperto durante l'aggiornamento e vorrei chiuderlo.

Questo è un esempio: http://jsfiddle.net/vtortola/CGuBk/2/

del esempio AJAX non ottiene dati probabilmente perché qualcosa di sbagliato che sto facendo quando si chiama l'API jsfiddle, ma dimostra come la SELEZIONA rimane aperta durante l'aggiornamento.

Voglio sapere come chiudere l'elenco a discesa programmaticamente senza concentrarsi su un altro input.

Cheers.

Answer 1

Non sono sicuro di nessun altro, ma sto utilizzando l'ultima versione stabile di Chrome e nessuna delle altre risposte che riguardano lo .blur() funziona per me.

Questa domanda chiede l'inverso: Programmatically open a drop-down menu

La conclusione che sembrava essere ottenuti è che non è possibile a causa del modo in cui il browser gestisce click elemento di campo.

Una soluzione migliore sarebbe sostituire il menu a discesa con un HTML puro e nasconderlo quando necessario con un semplice comando .hide().

Answer 2

Basta aggiungere questa linea di chiusura della chiusura entro click.

$(this).blur(); 

Così sarà simile

$select.click(function(e){ 

    $select.html('<option value="-1">Loading</option>'); 

    $(this).blur(); 
    ...... 
    ... 
}); 

DEMO

HAH! Se abbiamo un problema con i Chrome nuova versione quindi:

Prendere un falso select come segue:

<select class="fake" style="display: none"> 
    <option value="-1">Loading</option> 
</select> 

e fare qualcosa di simile:

$select.click(function(e) { 
    $(this).hide(0); // hide current select box 

    //$select.html('<option value="-1">Loading</option>'); 

    $('select.fake').show(0); // show the fake slide 

    $.ajax({ 
      // your code 
     }).done(function(data) { 

      $('select.fake').hide(0); 
      $select.show(0); 

     }) 
     ...... 
    }): 

DEMO

Answer 3

Credo che tutto quello che dovete fare è bersaglio qualcos'altro o dovrei dire concentrarsi perdere sul select (sfocarla)

<select> 
    <option value="0">Initial Value</option> 
</select> 

var $select = $('select'); 
$select.click(function(e){ 

    $select.html('<option value="-1">Loading</option>'); 

    $.ajax({ 
     url: '/echo/json/', 
     method:'post', 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     data: { json: JSON.stringify([1, 2, 3]), delay:1 } 
    }).done(function(data){ 

     $.each($.map(data, function (item, i) { 
        return "<option value='" + item +"' >" + item + "</option>"; 

       }), function (i, item) { 
        $element.append(item); 
       }); 

    }).fail(function(){ 
     alert('error'); 
    }); 

    e.preventDefault(); 
    e.stopPropagation(); 
    $(this).blur();  
}); 

Answer 4

Dopo ...

$select.html('<option value="-1">Loading</option>'); 

Prova ad aggiungere ...

$select.blur(); 

Answer 5

So che questa è una domanda vecchia e ho già una risposta, ma penso che la seguente soluzione possa essere un modo giusto per raggiungere l'obiettivo.

È possibile simulare la chiusura della selezione effettuando nuovamente il rendering. In jQuery è possibile implementare un semplice plugin per raggiungere questo obiettivo:

$.fn.closeSelect = function() { 
    if($(this).is("select")){ 
     var fakeSelect = $(this).clone(); 
     $(this).replaceWith(fakeSelect); 
    } 
}; 

e usarlo in questo modo:

$("#mySelect").closeSelect(); 

Answer 6

$('.select').on('change', function() { 
    $(this).click(); 
}); 

Answer 7

vecchio post, lo so, ma ho una soluzione molto semplice.

$(someSelectElement).on('change', function(e) { 
    e.target.size = 0  
} 

Questo comprimerà l'elemento di selezione se si fa clic su qualsiasi elemento nell'elenco.

Answer 8

Nel caso in cui chiunque altro là fuori sta usando Angular2, la soluzione che ha funzionato per me è stato quello di aggiungere un evento (messa a fuoco) che chiama $($event.srcElement).attr("disabled","disabled");

Ho quindi aggiungere un timeout per riattivare l'elemento quando voglio diventa di nuovo attivo.

Answer 9

SOLUZIONE 1 Ho trovato una soluzione molto semplice.

select.style.display = "none"; 
setTimeout(function() { 
    select.style.display = "block"; 
}, 10); 

Questo nascondere elemento DOM, questo causa che dropdown sarà chiusa e poi con 10ms ritardo (senza ritardo non funziona) restituire in DOM.

SOLUZIONE 2: un po 'più complicato ma senza ritardo è completamente rimosso dal DOM e quindi restituito immediatamente.

var parent = select.parentElement; 
var anchor = document.createElement("div"); 
parent.insertBefore(anchor, select); 
parent.removeChild(select); 
parent.insertBefore(select, anchor); 
parent.removeChild(anchor); 

Questo memorizza l'elemento, quindi porta l'ancora prima di selezionare. L'ancora è lì per ripristinare la selezione nella stessa posizione in DOM di prima. Ovviamente può essere implementato per funzionare select element.

HTMLSelectElement.prototype.closeDropdown = function() { 
    var parent = this.parentElement; 
    var anchor = document.createElement("div"); 
    parent.insertBefore(anchor, this); 
    parent.removeChild(this); 
    parent.insertBefore(this, anchor); 
    parent.removeChild(anchor); 
} 

e poi basta chiamare

select.closeDropdown(); 

Example