Cómo evitar que se abra el menú de selección

Question

Posiblemente una pregunta tonta, pero ¿cómo evito que un elemento seleccionado en un formulario muestre su menú desplegable cuando se hace clic en? He intentado lo siguiente:

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

y

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

Pero tampoco funcionó.

¿Qué estoy haciendo mal?

EDIT: La razón por la que necesito saber es por un elemento de selección mejorado jquery que debe degradarse con gracia. La idea es que al seleccionar, cuando se hace clic, se abra un cuadro de diálogo de la IU de jquery con una lista bien maquetada de la que el usuario hace su selección (al hacer clic en un elemento de la lista se actualiza el valor de la selección). Si JS está desactivado, la selección debería funcionar de la forma habitual.

El problema es que, además de abrir el cuadro de diálogo, también aparece el menú desplegable, que no es lo que quiero. No puedo simplemente desactivar el control, ya que su valor debe enviarse junto con el resto del formulario.

Answer 1

Creo que la mejor solución sería la de sustituir el elemento de selección con otra cosa que hacer clic en (un botón o un enlace).

Por cierto, es posible que desee buscar en la propiedad CSS 3 appearence, que teóricamente le permite dejar que ese elemento de reemplazo parezca un menú desplegable. El apoyo es sin embargo actualmente muy limitado:

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

Answer 2

Uso discapacitados

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

Answer 3

Ocultar las opciones seleccionadas al cargar la página (si Javascript habilitado). No se mostrarán cuando se haga clic en la casilla de selección, pero el texto de la primera opción ("Seleccionar una opción", o lo que sea) seguirá apareciendo en el campo de selección.

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

Actualizado Solución:

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

Answer 4

Desde mi experiencia, si tengo que desactivar algo, la manera más fácil de tener otro elemento invisible en él (el uso posicionamiento absoluto) . Cuando quiera permitir el comportamiento predeterminado nuevamente, simplemente oculta el elemento absoluto.

Answer 5

Acabo de resolver este problema exacto, manipulando el atributo 'tamaño' de select. No muy elegante, pero funcionó. Espero que te ayude.

<!-- 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

esto debería funcionar: -

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

Answer 7

Puede, el truco consiste en cancelar el evento MouseDown, no el clic.La cadena de eventos se realiza de tal manera que haga clic y mouseup no puede ocurrir si mousedown fue cancelada:

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

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

Answer 8

El problema es que usted está utilizando el evento equivocado.

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

JsFiddle