How to deselect a multiple selection

Question

How to deselect a multiple selection

Navigation

#1 by (0 votes)

0

<!DOCTYPE html>
<html>
<head>
    <title>select multiple</title>

    <link href="styles/multiselect.css" rel="stylesheet"/>
    <script src="multiselect.min.js"></script>

</head>
<body>
<select id='testSelect1' multiple>
    <option value='1'>Item 1</option>
    <option value='2'>Item 2</option>
    <option value='3'>Item 3</option>
    <option value='4'>Item 4</option>
    <option value='5'>Item 5</option>
</select>
<script>
    document.multiselect('#testSelect1');
</script>
<button onclick="anadir();">añadir</button>
</body>

Then I connect it to this .js what it does is that all the options are marked

//multiselect collection
window.multiselects = [];

if (typeof ($) != 'undefined') {
    //jQuery extension for multiselect
    $.fn.multiselect = function () {
        //if no elements passed - it is not an error
        var res = [];
        if (!window.multiselects._items) {
            window.multiselects._items = [];
        }

        if (this.length != 0) {
            $(this).each(function (i, e) {
                var index = window.multiselects._items.indexOf(e);
                if (index == -1) {
                    var inputItem = new Multiselect(e);
                    window.multiselects.push(inputItem);
                    window.multiselects._items.push(e);

                    res.push(inputItem)
                } else {
                    res.push(window.multiselects[index]);
                }
            });
        }

        return res.length == 1 ? res[0] : $(res);
    };

    $(document).click(function (event) {
        hideMultiselects(event);
    });
} else {
    document.multiselect = function(selector) {
        var res = [];
        if (!window.multiselects._items) {
            window.multiselects._items = [];
        }

        m_helper.each(document.querySelectorAll(selector), function(e) {
            var index = window.multiselects._items.indexOf(e);
            if (index == -1) {
                var inputItem = new Multiselect(e);
                window.multiselects.push(inputItem);
                window.multiselects._items.push(e);

                res.push(inputItem)
            } else {
                res.push(window.multiselects[index]);
            }
        });

        return res.length == 1 ? res[0] : res;
    }

    window.onclick = function(event) {
        hideMultiselects(event);
    };
}

function hideMultiselects(event) {
    m_helper.each(window.multiselects, function(e) {
        if (document.getElementById(e._getItemListIdentifier()).offsetParent &&
                !m_helper.parent(event.target, e._getIdentifier())) {
            e._hideList(e, event);
        }
    });
}

My question would be, in what line of code do I modify so that they do not show me all the marked options?

javascript html php css

asked by kev 25.04.2018 в 18:25

source

1 answer

SEO problems and meta boxes Fatal error when performing git push to existing repository

score 0 · Answer 1

Assuming your example, I would do something like that

<select id='testSelect1' multiple>
    <option value='1'>Item 1</option>
    <option value='2'>Item 2</option>
    <option value='3'>Item 3</option>
    <option value='4'>Item 4</option>
    <option value='5'>Item 5</option>
</select>
<a href="#" onclick="miFuncion();">DesSeleccionar</a>

JAVASCRIPT

 function miFuncion(){
    var elements = document.getElementById("testSelect1").options;

    for(var i = 0; i < elements.length; i++){
      elements[i].selected = false;
    }//end for
  }//end function

In this simple way we deselect the multiselect! Another way would be using jquery something like this:

$("#testSelect1 option:selected").removeAttr("selected");

Here is the example