Comment éviter le besoin de ctrl-clic dans un multi-sélectionner la zone à l'aide de Javascript?

Je pensais que ce serait un simple hack, mais j'ai été à la recherche pour les heures et ne peut pas vu à trouver le bon terme de recherche. Je veux avoir un ordinaire de multiples sélectionnez zone (<select multiple="multiple">) sauf que je ne veux pas l'utilisateur d'avoir à maintenir la touche ctrl enfoncée pour faire des sélections multiples.

En d'autres termes, je veux un clic gauche pour faire basculer le <option> élément qui se trouve sous le curseur, sans changer les autres. En d'autres mots, je veux quelque chose qui ressemble à une zone de liste déroulante zone de liste, mais se comporte comme un groupe de cases à cocher.

Quelqu'un peut-il suggérer une façon simple de le faire en Javascript? Merci.

Si vous n'avez pas l'esprit de changer votre balisage, vous pouvez créer une liste de cases à cocher & étiquettes, puis masquer la case à cocher, et le style de l'étiquette lorsqu'elle est entrée est cochée) d'avoir la même apparence visuelle à <select multiple>. Démo en violon

InformationsquelleAutor bokov | 2011-12-27

94

Vérifier ce violon: http://jsfiddle.net/xQqbR/1022/

Vous avez besoin de remplacer le mousedown événement pour chaque <option> et de basculer la selected bien là.
```
$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', !$(this).prop('selected'));
    return false;
});
```
Pour des raisons de simplicité, j'ai donné "option" que le sélecteur ci-dessus. Vous pouvez l'affiner pour correspondre à <option>s sous certaines <select> élément(s). Ex: $('#mymultiselect option')
- Vous pouvez utiliser ! this.selected là.
- Aha! La méthode preventDefault() est ce que je pense que j'ai été absent. Je vais l'essayer et d'en faire rapport.
- Il serait.
- Merci pour le pointeur. Réponse d'édition.
- Comme alex l'a dit, vous pouvez utiliser this.selected au lieu de $(this).prop('selected').
- Désolé d'être dense, mais dois-je mettre le code ci-dessus à l'intérieur de l'habitude <script> balises dans l'en-tête? Parce que j'ai fait et et je suis encore en train de la norme de comportement de la part de ma zone de liste. Ou est-ce la dépend de jQuery?
- Cela dépend de jQuery. Assurez-vous d'exécuter le code ci-dessus une fois vos éléments DOM sont chargés et prêts à se lier à des événements. Un bon endroit pour mettre ça allait être à l'intérieur de votre $(document).ready(...)
- Cochez cette mise à jour de violon: jsfiddle.net/techfoobar/xQqbR/1
- Merci!!!!!! C'est incroyable de voir la solution!
- Il ne fonctionne pas dans IE 10. 🙁 Quelqu'un connais une solution de contournement?
- il ne travaille pas dans FF 28 non plus!!
- Comment ajouter de l'événement onchange alors? violon: jsfiddle.net/mpsbhat/ua057y5t
- Malheureusement, cela ne fonctionne pas dans Firefox 🙁
- Ne fonctionne pas correctement. Il désélectionne toutes les options une fois que vous faites glisser la souris.
- Très bonne solution. Le seul inconvénient que j'ai remarqué, c'est que l'événement de prévention travaille dans une manière que le parent n'est pas axée sur, résultant en une apparence différente (gris au lieu de bleu d'arrière-plan de certaines options). Afin de conserver l'aspect et je me suis concentré sur la boîte de sélectionner manuellement. $(c'.parentElement).focus();
- Comme tout le monde, a déclaré, pour simplifier, il serait juste this.selected = !this.selected; Il n'y a vraiment pas besoin d'utiliser jQuery
- Comme indiqué dans le cette question, IE et FF ont très peu de soutien pour le tir, les événements mousedown sur l'option éléments, qui limitent fortement ces types de solutions qui reposent sur l'extension de la valeur par défaut <select multiple > comportement comme celui-ci. Pour la croix-prise en charge du navigateur, vous pourriez être mieux de la construction d'un contrôle personnalisé avec une liste de style de cases à cocher.
- Lorsque l'sélectionnez barre de défilement, il sera saut pour la première option sélectionnée, c'est un scintillement, comment résoudre ce problème?
- Voici un correctif => jsfiddle.net/xQqbR/1022
- Vous devez définir l'option.parentElement.focus(); aussi, parce que ce n'est pas se régler lorsque vous écrivez e.preventDefault...
InformationsquelleAutor techfoobar

Eu à résoudre ce problème moi-même remarqué que la buggé comportement d'un simple interception de l' mousedown et de la définition de l'attribut aurait, alors faites un remplacement de l'élément select et il fonctionne bien.

jsFiddle: http://jsfiddle.net/51p7ocLw/

Remarque: Ce code résout buggy comportement en remplaçant le sélectionner l'élément dans le DOM. C'est un peu agressif et va casser des gestionnaires d'événement que vous pourriez avoir attaché à l'élément.

JS:

window.onmousedown = function (e) {
    var el = e.target;
    if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
        e.preventDefault();

        //toggle selection
        if (el.hasAttribute('selected')) el.removeAttribute('selected');
        else el.setAttribute('selected', '');

        //hack to correct buggy behavior
        var select = el.parentNode.cloneNode(true);
        el.parentNode.parentNode.replaceChild(select, el.parentNode);
    }
}

HTML:

<h4>From</h4>

<div>
    <select name="sites-list" size="7" multiple>
        <option value="site-1">SITE</option>
        <option value="site-2" selected>SITE</option>
        <option value="site-3">SITE</option>
        <option value="site-4">SITE</option>
        <option value="site-5">SITE</option>
        <option value="site-6" selected>SITE</option>
        <option value="site-7">SITE</option>
        <option value="site-8">SITE</option>
        <option value="site-9">SITE</option>
    </select>
</div>

Cela a fonctionné pour moi à la fois dans Chrome et Firefox.
Ne fonctionne pas sous IE 11, le violon n'est pas au moins.
Cela fonctionne pour moi, mais la sélection ne prend pas la forme sales (e.preventDefault()). Juste quelque chose à avoir à l'esprit.
ne fonctionne pas sous IE 11
Veuillez expliquer ce que vous entendez par "comportement incorrect"
Ce n' e.preventDefault() faire?

InformationsquelleAutor Sergio

5

techfoobar la réponse est buggé, il désélectionne toutes les options si vous faites glisser la souris.

Sergio réponse est intéressante, mais le clonage et suppression d'événements liés à une liste déroulante n'est pas une bonne chose.

Essayez cette réponse.

Remarque: Ne fonctionne pas sur Firefox, mais fonctionne parfaitement sur Safari/Chrome/Opera. (Je n'ai pas le tester sur IE)
- Celui-ci est le meilleur, en effet, n'est-ce pas, faites défiler vers le haut lorsque vous cliquez sur.
InformationsquelleAutor evilReiko

Necromancing.

La réponse sélectionnée sans jQuery.

Aussi, il a raté le réglage de la mise au point lorsque l'option est cliqué, parce que vous avez à faire vous-même, si vous écrivez e.preventDefault...

L'oubli de l'accent aurait une incidence sur CSS-style, par exemple, bootstrap, etc.

var options = [].slice.call(document.querySelectorAll("option"));

options.forEach(function (element)
{
    //console.log("element", element);
    element.addEventListener("mousedown", 
        function (e)
        {
            e.preventDefault();
            element.parentElement.focus();
            this.selected = !this.selected;
            return false;
        }
        , false
    );
});

InformationsquelleAutor Stefan Steiger

J'ai eu le même problème aujourd'hui, de façon générale, il est conseillé d'utiliser une liste de cases à cocher masqué et imiter le comportement via css, de cette façon est plus facile à gérer, mais dans mon cas, je ne veux pas modifier le code html.

Pour le moment j'ai testé ce code uniquement avec google chrome, je ne sais pas si collabore avec d'autres navigateur, mais il devrait:

var changed;
$('select[multiple="multiple"]').change(function(e) {
    var select = $(this);
    var list = select.data('prevstate');
    var val = select.val();
    if (list == null) {
        list = val;
    } else if (val.length == 1) {
        val = val.pop();
        var pos = list.indexOf(val);
        if (pos == -1)
            list.push(val);
        else
            list.splice(pos, 1);
    } else {
        list = val;
    }
    select.val(list);
    select.data('prevstate', list);
    changed = true;
}).find('option').click(function() {
    if (!changed){
        $(this).parent().change();
    }
    changed = false;
});

Bien sûr, les suggestions sont les bienvenues, mais je n'ai pas trouvé un autre moyen

InformationsquelleAutor Marino Di Clemente

Vous devez vous connecter pour publier un commentaire.