Ouvrir Sélectionner en utilisant Javascript/jQuery?
Existe-t-il un moyen d'ouvrir une zone de sélection à l'aide de Javascript (et 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>
Je dois ouvrir ma sélection, à cause d'un bogue. Toutes les versions de IE (6,7,8) coupent mes options . Pour autant que je sache, il n'y a pas de correction de bogues cachés pour ceci . Pour l'instant, j'essaie de faire ce qui suit:
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;
});
}
Mais cliquer sur ma sélection la première fois changera la largeur de la sélection mais je devrai cliquer à nouveau pour l'ouvrir.
Ok, j’ai trouvé un autre moyen de résoudre ce problème . Voici le correctif:
S'il vous plaît donnez-moi des commentaires! Je suis un peu fier de moi-même;)
$(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();
}
Je sais que cela est assez vieux et a répondu, mais cela a fonctionné pour moi dans Safari et iOS UIWebView - je l'ai caché, mais je veux qu'il soit affiché et ouvert quand un bouton différent est cliqué.
$('#select-id').show().focus().click();
Essaye ça:
var myDropDown=$("#myDropDown");
var length = $('#myDropDown> option').length;
//open dropdown
myDropDown.attr('size',length);
et ceci pour fermer:
//close dropdown
myDropDown.attr('size',0);
NON solution jQuery.
<SCRIPT>
function toggleDropdown(element){
if(element.size == 0) element.size = element.length;
else element.size = 0;
}
</SCRIPT>
Trouvé ceci ici .
Je pense que vous devez renvoyer true à partir de vos gestionnaires d’événements (clic, flou, etc.) afin qu’après l’exécution de votre gestionnaire, le navigateur continue de propager l’événement et d’ouvrir la sélection.
Il en va de même pour les liens href, s'ils ont un gestionnaire onclick et que le gestionnaire renvoie false, le lien n'est pas suivi (le navigateur arrête l'événement après l'exécution de votre gestionnaire).
EDIT: Sur la base de votre commentaire et de votre réponse, il semble que votre gestionnaire ait la première chance de s'exécuter uniquement après que le navigateur a décidé d'ouvrir la boîte.
Je vous suggère d’essayer le gestionnaire d’événements focus, il se peut qu’il soit exécuté avant le gestionnaire click et peut-être avant que le navigateur n’ouvre réellement la boîte. Il est également plus cohérent (s’applique à la fois à la souris et au clavier).
Tout d’abord, je ressens la douleur de cette limitation dans IE - bleh! Je pensais juste que je partagerais aussi ceci car cela semble fonctionner pour moi. J'ai adopté presque la même approche, mais sur un élément sélectionné. Dans mon cas, je sais quelles listes pourraient contenir de longues données.
Au lieu de rendre les éléments sélectionnés absolus, je les ai conservés en ligne et les ai enveloppés dans une DIV avec un débordement masqué, car l'apparence devait être cohérente. De plus, il n'applique ce "hack" que s'il est IE et la largeur développée est supérieure à la largeur actuelle.
Pour utiliser cela pour toutes les cases de sélection, vous pouvez utiliser quelque chose comme:
$("select").each(function(){
$(this).IELongDropDown();
});
Ou bien évidemment sur une base élément par id . Voici le plugin 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);
J'espère que cela aide quelqu'un
Essaye ça:
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);
};
Puis appelez la fonction:
dropDown('elementId');
vous ne pouvez pas ouvrir la liste de sélection mais vous pouvez le faire en modifiant la taille de la liste de sélection en cliquant ou tout autre événement souhaité
$("#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);
});
L'événement mousedown est levé avant l'événement click:
- première augmentation de la souris -> définit la largeur sur 'auto' (si l'état du menu déroulant est 'fermé')
- cliquez sur augmenter -> store dans une var l'état du menu déroulant: 'open'
- On sélectionne une valeur, le deuxième souris est levé: rien à faire
- cliquez sur augmenter -> nous devons restaurer la largeur d'origine de la liste déroulante et modifier l'état de la var en: 'close'
Les événements flou et changement sont nécessaires pour fermer la liste déroulante si l'utilisateur a cliqué en dehors de la liste déroulante.
Voici la solution complète avec le code 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);
Appelez la fonction:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#mydropdownlist').IELongDropDown();
});
</script>
Je préfère placer mon CSS dans un fichier CSS, puis "addClass" mais malgré tout, votre code (portion)
$('select').blur(function(){
$(this).css({
'position' : 'relative',
'width' : original_width
});
});
$('select').blur(function(){
$(this).css({
'position' : 'relative',
'width' : original_width
});
});
semble être un doublon
Je le ferais:
$('select').blur().css({
'position' : 'relative',
'width' : original_width
});
Je ne suis pas sûr que vous ayez vraiment besoin de .blur () ici avec l’événement .change () (essayez de le supprimer pour voir si cela résout votre problème ... J'utilise select souvent sur IE et ne semble pas avoir un problème.