Impedire l'apertura del menu di selezione

Question

Forse una domanda stupida, ma come impedire a un elemento di selezione in un modulo di mostrare il relativo menu a discesa quando viene fatto clic su? Ho provato quanto segue:

$('select').click (function (e) { 
    console.log (e); 
    return false; 
}); 

e

$('select').click (function (e) { 
    e.preventDefault(); 
    console.log (e); 
}); 

Ma nessuno ha funzionato.

Cosa sto sbagliando?

EDIT: La ragione per cui ho bisogno di sapere è per un elemento di selezione potenziato jquery che deve degradarsi con grazia. L'idea è la selezione, quando si fa clic, si apre una finestra di dialogo dell'interfaccia utente jQuery con un elenco creato correttamente da cui l'utente effettua la selezione (facendo clic su una voce dell'elenco si determina l'aggiornamento del valore della selezione). Se JS è disabilitato, la selezione dovrebbe funzionare normalmente.

Il problema è che, oltre all'apertura della finestra di dialogo, viene visualizzato anche il menu a discesa, che non è quello che voglio. Non posso semplicemente disabilitare il controllo, poiché il suo valore deve essere inviato insieme al resto del modulo.

Answer 1

credo che la soluzione migliore sarebbe quella di sostituire l'elemento di selezione con qualcos'altro a cliccare su (un pulsante o un link).

BTW, si consiglia di esaminare la proprietà CSS 3 appearence, che in teoria consente di rendere quell'elemento di sostituzione simile a un menu a discesa. Il supporto è però attualmente molto limitato:

• http://css-infos.net/property/-webkit-appearance
• https://developer.mozilla.org/en/CSS/-moz-appearance

Answer 2

Usa disabilitato

$(this).attr("disabled","disabled"); 

Answer 3

nascondere le opzioni di selezione al caricamento della pagina (se Javascript abilitato). Non verranno visualizzati quando si fa clic sulla casella di selezione, ma il testo della prima opzione ("Seleziona un'opzione", o qualsiasi altra cosa) verrà ancora visualizzato nel campo di selezione.

$(document).ready(function() { 
    $('#idOfSelect option').css('display', 'none'); 
}); 

Aggiornato Soluzione:

$(document).ready(function() { 
    $('#idOfSelect').focusin(function() { 
     $(this).css('display', 'none'); 
     $('body').click(function(event) { 
      $(this).unbind(event); 
      $('#idOfSelect').css('display', 'block'); 
     }); 
    }); 
}); 

Answer 4

Dalla mia esperienza, se ho bisogno di disattivare qualcosa, il modo più semplice per avere un altro elemento invisibile su di esso (uso assoluto posizionamento) . Quando si desidera consentire nuovamente il comportamento predefinito, è sufficiente nascondere l'elemento assoluto.

Answer 5

Ho appena risolto questo problema esatto, manipolando l'attributo 'dimensione' di select. Non molto elegante, ma funzionante. Spero che ti sia di aiuto.

<!-- Example select dropdown --> 
<select id="select" onclick="tackleDropdown()"> 
</select> 

<!-- The JS function --> 
<script> 
    function tackleDropdown(){ 
     document.getElementById('select').setAttribute('size', 0); 

     // your code for displaying the jQuery UI dialog (is it colorbox???) 

     // re-enabling the drop down 
     document.getElementById('select').setAttribute('size', document.getElementById('select').options.length); 
    } 
</script> 

Answer 6

questo dovrebbe funzionare: -

$('#select').on('mousedown', function(e) { 
    e.preventDefault(); 
    this.blur(); 
    window.focus(); 
}); 

Answer 7

È possibile, il trucco è quello di annullare l'evento MouseDown, non il click.La catena di eventi è realizzato in modo tale che cliccare e mouseup non può verificarsi se mousedown è stato annullato:

function cancelDropDown(ev) { 
    ev.preventDefault(); 
} 

document.getElementById("selectElement").addEventListener("mousedown", cancelDropDown, false); 

Answer 8

Il problema è che si sta utilizzando l'evento sbagliato.

<select onmousedown="(function(e){ e.preventDefault(); })(event, this)"> 
    <option>Some Option</option> 
</select> 

JsFiddle