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

Entonces lo conecto a este .js el cual hace que se marquen todas las opciones:

//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);
        }
    });
}

Mi pregunta sería: ¿qué línea de código modifico para que no se me muestren todas las opciones marcadas?

2 respuestas 2

1

Suponiendo el ejemplo tuyo haria algo asi

<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

de esta manera sencilla deseleccionamos los multiselect !! otra forma seria usando jquery algo asi:

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

Aqui el ejemplo realizado

5
  • 1
    en el codigo que has añadido creas un boton para des-seleccionar; pero lo que busco es que al momento de cargar la pagina, me muestre las opciones desmarcadas
    – kev
    Commented el 25 abr. 2018 a las 16:47
  • 1
    busca una solucion practica manda a llamar a la funcion deseleccionar Commented el 25 abr. 2018 a las 16:48
  • 1
    window.onload = miFuncion; Commented el 25 abr. 2018 a las 16:48
  • 1
    con eso llamas a la funcion de javascript que deselecciona tu multiselect, al cargar la pagina Commented el 25 abr. 2018 a las 16:49
  • 1
    sigue manteniendose marcado
    – kev
    Commented el 25 abr. 2018 a las 16:58
1

Lo puedes realizar cargando el valor de las opciones

   <select multiple value={[1,3]}>
       <option value="1">opcion 1</option>
       <option value="2">opcion 2</option>//Esta estará por consecuencia no seleccionada
       <option value="3">opcion 3</option>
       <option value="4">opcion 4</option>//Esta estará por consecuencia no seleccionada
    </select>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.