Abrir Seleccione usando Javascript/jQuery?

Question

¿Hay alguna manera de abrir un cuadro de selección usando Javascript (y jQuery)?

<select style="width:150px;"> 
    <option value="1">1</option> 
    <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu nunc, rhoncus ac dignissim at, rhoncus ac tellus.</option> 
    <option value="3">3</option> 
</select> 

Tengo que abrir mi selección, causa de ie error. Todas las versiones de IE (6, 7, 8) cortan mis opciones. Por lo que sé, no hay corrección de errores css para esto. En el momento en que trate de hacer lo siguiente:

var original_width = 0; 
var selected_val = false; 

if (jQuery.browser.msie) { 
    $('select').click(function(){ 
     if (selected_val == false){ 
      if(original_width == 0) 
       original_width = $(this).width(); 

      $(this).css({ 
       'position' : 'absolute', 
       'width' : 'auto' 
      }); 
     }else{ 
      $(this).css({ 
       'position' : 'relative', 
       'width' : original_width 
      }); 
      selected_val = false; 
     } 
    }); 

    $('select').blur(function(){ 
     $(this).css({ 
      'position' : 'relative', 
      'width' : original_width 
     }); 
    }); 

    $('select').blur(function(){ 
     $(this).css({ 
      'position' : 'relative', 
      'width' : original_width 
     }); 
    }); 

    $('select').change(function(){ 
     $(this).css({ 
      'position' : 'relative', 
      'width' : original_width 
     }); 
    }); 

    $('select option').click(function(){ 
     $(this).css({ 
      'position' : 'relative', 
      'width' : original_width 
     }); 

     selected_val = true; 
    }); 

} 

Pero al hacer clic en mis seleccionar la primera vez que va a cambiar el ancho del selecto pero tengo que haga clic de nuevo para abrirlo.

Answer 1

De acuerdo, encontré otra manera de solucionar este problema. Aquí está la solución:

Por favor déjenme sus comentarios! Estoy orgulloso de mí mismo;)

$(document).ready(function() { 
    if (jQuery.browser.msie) { 
      select_init(); 
    } 
}); 


function select_init() { 
    var selects = $('select'); 
    for (var i = 0; i < selects.length; i++) { 
     _resizeselect.init(selects[i]); 
    } 
} 


var _resizeselect = { 
    obj : new Array(), 
    init : function (el) { 
     this.obj[el] = new resizeselect (el); 
    } 
} 

function resizeselect (el) { 

    this.el = el; 
    this.p = el.parentNode; 
    this.ht = el.parentNode.offsetHeight; 
    var obj = this; 
    this.set = false; 

    el.onmousedown = function() { 
     obj.set_select("mousedown"); 
    } 
    el.onblur = function() { 
     obj.reset_select("blur"); 
    } 
    el.onchange = function() { 
     obj.reset_select("change"); 
    } 

} 

resizeselect.prototype.set_select = function (str) { 

    if (this.set) { 
     this.set = false; 
     return; 
    } 

    this.el.style.width = "auto"; 
    this.el.style.position = "absolute"; 
    this.p.style.height = this.ht + "px"; 
    this.p.style.zIndex = 100; 
    this.set = true; 
    this.el.focus(); 
} 

resizeselect.prototype.reset_select = function (str) { 
    this.el.style.width = ""; 
    this.el.style.position = ""; 
    this.p.style.height = ""; 
    this.p.style.zIndex = 1; 
    this.set = false; 
    window.focus(); 
} 

Answer 2

Creo que debe devolver el valor verdadero de sus controladores de eventos (hacer clic, desenfocar, etc.) para que después de que se ejecute su controlador, el navegador continúe propagando el evento y abra la selección.

Es similar con los enlaces href, si tienen un controlador onclick y el manejador devuelve falso, el enlace no se sigue (el navegador detiene el evento después de que se ejecute su controlador).

EDIT: Según su comentario y respuesta, parece que su controlador tiene la primera oportunidad de ejecutar solo después de que el navegador decide abrir la caja.
Sugiero que pruebe el controlador de eventos focus, podría tener la oportunidad de ejecutarse antes que el controlador click y quizás antes de que el navegador realmente abra el cuadro. También es más uniforme (se aplica tanto a la navegación con el mouse como al teclado).

Answer 3

prefiero poner mi CSS en un archivo CSS y luego "addClass", pero aún así, su código (porción)

$('select').blur(function(){ 
     $(this).css({ 
      'position' : 'relative', 
      'width' : original_width 
     }); 
    }); 

    $('select').blur(function(){ 
     $(this).css({ 
      'position' : 'relative', 
      'width' : original_width 
     }); 
    }); 

parece ser un duplicado

que lo haría:

$('select').blur().css({ 
     'position' : 'relative', 
     'width' : original_width 
}); 

no estoy seguro de que en realidad ni siquiera necesita el .blur() aquí lo que con el evento .Cambiar() (tratar de sacarlo ver ver si eso se dirige a su problema ... yo uso seleccione menudo en IE y no hago parece tener un problema.

Answer 4

En lugar de usar click, puede usar el controlador mousedown para capturar el evento mousedown. mousedown se dispara antes de click, por lo que puede llamar al stopPropogation para interrumpir la cola de eventos.

Answer 5

Antes que nada, siento el dolor de esta limitación en IE - bleh! Solo pensé que también lo compartiría, ya que parece funcionar para mí. He tomado casi el mismo enfoque, pero en un elemento por seleccionar. En mi caso, sé qué listas podrían tener datos largos.

En lugar de hacer que los elementos seleccionados sean absolutos, los he mantenido en línea y los he envuelto en un DIV con un desbordamiento oculto ya que la apariencia debe ser consistente, también solo aplica este 'truco' si es IE y el expandido el ancho es mayor que el ancho actual.

utilizar esto para todas las cajas de selección que podría utilizar algo como:

$("select").each(function(){ 
     $(this).IELongDropDown(); 
    }); 

O obviamente en un elemento base por por id. Aquí está el plugin de jQuery:

(function($) { 
    $.fn.IELongDropDown = function(cln) { 
     if (jQuery.browser.msie) { //only IE has problems with long select boxes 
      var el = this; 
      var previousWidth = el.width(); 
      var divWrapper = "<div style='padding:0;margin:0;overflow:hidden;width:"+ previousWidth +"px'></div>"; 
      el.wrap(divWrapper); 
      var newWidth = el.width("auto").width(); 
      el.width(previousWidth); 
      if(newWidth > previousWidth) { 
       el.bind("mousedown", function(){ return el.width("auto").focus(); }); 
       el.bind("blur", function(){ return el.width(previousWidth); }); 
       el.bind("change", function(){ return el.width(previousWidth); }); 
      } 
     } 
     return this; 
    }; 
})(jQuery); 

Espero que esto ayude a alguien

Answer 6

el evento MouseDown es subida antes del evento click:

1. primer aumento mousedown -> establecer el ancho a 'auto' (si el estado del menú desplegable es 'cerrado')
2. haga clic en subir -> almacenar en var el estado del menú desplegable: 'abrir'
3. Seleccionamos un valor, la segunda mousedown se eleva: nada que ver
4. , en Elevar -> necesitamos restaurar el ancho original de la lista desplegable y cambiar el estado de la var a: 'cerca'

El desenfoque y cambiar caso son necesario para cerrar el menú desplegable si el usuario hizo clic fuera del menú desplegable.

Aquí la solución completa con código de Brendan:

(function ($) { 
var open = {} 
$.fn.IELongDropDown = function (cln) { 
    if (jQuery.browser.msie) { //only IE has problems with long select boxes 
     var el = this; 
     var id = el.attr('id'); 
     var margin = 2; //Need to set a margin however the arrow is cut 
     var previousWidth = el.width() + margin; 
     var divWrapper = "<div style='padding:0;margin:0;overflow:hidden;width:" + previousWidth + "px'></div>"; 
     el.wrap(divWrapper); 
     var newWidth = el.width("auto").width(); 
     el.width(previousWidth); 
     if (newWidth > previousWidth) { 
      el.mousedown(function() { 
       if (!open[id]) { 
        el.width("auto"); 
        el.focus(); 
       } 
      }); 
      el.click(function() { 
       if (!open[id]) 
        open[id] = true; 
       else { 
        open[id] = false; 
        return el.width(previousWidth); 
       } 
      }); 
      el.blur(function() { 
       open[id] = false; 
       return el.width(previousWidth); 
      }); 
      el.change(function() { 
       open[id] = false; 
       return el.width(previousWidth); 
      }); 
     } 
    } 
    return this; 
}; 
})(jQuery); 

Llame a la función:

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     $('#mydropdownlist').IELongDropDown(); 
    }); 
</script> 

Answer 7

Sé que esto es bastante viejo y contestado, pero esto funcionó para mí en Safari y el IOS UIWebView - Lo tengo oculto, pero quiero que se muestre y se abra cuando se hace clic en un botón diferente.

$('#select-id').show().focus().click(); 

Answer 8

no puede abrir la lista de selección, pero lo puede hacer cambiando el tamaño de theselect lista de clic o cualquier otro evento que desea

 $("#drpdwn").mousedown(bodyevent); 
     function bodyevent() 
     { 
      console.log("size changed"); 
      $(this).attr('size',3); 
     } 
     $("#drpdwn").focus(function() 
     { 
      //alert("txt clicked from "); 
      var $el = $("#drpdwn"); 
      var offset = $el.offset(); 
      var event = jQuery.Event("mousedown", { 
       which: 1, 
       pageX: offset.left, 
       pageY: offset.top 
      }); 
      $el.trigger(event); 
     }); 

Answer 9

Hay una solución alternativa Encontré este problema. Simplemente agregue un tema a su cuadro de selección como Selectize.js convertirá su cuadro de selección en etiquetas ul li html, pero funciona como cuadro de selección. Puede ocultar fácilmente los shows de ulli en eventos de jquery.

Answer 10

Prueba esto:

var myDropDown=$("#myDropDown"); 
var length = $('#myDropDown> option').length; 
//open dropdown 
myDropDown.attr('size',length); 

y esto para cerrar:

//close dropdown 
myDropDown.attr('size',0); 

Answer 11

NO solución de jQuery.

<SCRIPT> 
    function toggleDropdown(element){ 
     if(element.size == 0) element.size = element.length; 
     else element.size = 0; 
     } 
</SCRIPT> 

Encontrado here.

Answer 12

Prueba esto:

dropDown = function (elementId) { 
    var dropdown = document.getElementById(elementId); 
    try { 
     showDropdown(dropdown); 
    } catch(e) { 

    } 
    return false; 
}; 

showDropdown = function (element) { 
    var event; 
    event = document.createEvent('MouseEvents'); 
    event.initMouseEvent('mousedown', true, true, window); 
    element.dispatchEvent(event); 
}; 

Luego llama a la función:

dropDown('elementId');