how select multiple values from html drop down list with out holding ctrl button

Question

i am trying to generate list from dropdown selected values using html and JavaScript, my code is working fine. but when i want to select multiple values its required to hold ctrl button. below is my form

<form action="#" method="post" id="demoForm" class="demoForm">
    <fieldset>

        <p>
            <select name="demoSel[]" id="demoSel" size="4" multiple>
                <option value="scroll">Scrolling Divs JavaScript</option>
                <option value="tooltip">JavaScript Tooltips</option>
                <option value="con_scroll">Continuous Scroller</option>
                <option value="banner">Rotating Banner JavaScript</option>
                <option value="random_img">Random Image PHP</option>
                <option value="form_builder">PHP Form Generator</option>
                <option value="table_class">PHP Table Class</option>
                <option value="order_forms">PHP Order Forms</option>
            </select>
            <input type="submit" value="Submit" />
        <!--<textarea name="display" id="display" placeholder="view select list value(s) onchange" cols="20" rows="4" readonly></textarea>-->

        <div id="display"></div>
        </p>

    </fieldset>
</form>

then my javascript:

<script>
// arguments: reference to select list, callback function (optional)
function getSelectedOptions(sel, fn) {
    var opts = [], opt;

    // loop through options in select list
    for (var i=0, len=sel.options.length; i<len; i++) {
        opt = sel.options[i];

        // check if selected
        if ( opt.selected ) {
            // add to array of option elements to return from this function
            opts.push(opt);

            // invoke optional callback function if provided
            if (fn) {
                fn(opt);
            }
        }
    }

    // return array containing references to selected option elements
    return opts;
}

// example callback function (selected options passed one by one)
function callback(opt) {
    // can access properties of opt, such as...
    //alert( opt.value )
    //alert( opt.text )
    //alert( opt.form )

    // display in textarea for this example
    var display = document.getElementById('display');
    display.innerHTML += opt.value + ', ';
}

// anonymous function onchange for select list with id demoSel
document.getElementById('demoSel').onchange = function(e) {
    // get reference to display textarea
    var display = document.getElementById('display');
    display.innerHTML = ''; // reset

    // callback fn handles selected options
    getSelectedOptions(this, callback);

    // remove ', ' at end of string
    var str = display.innerHTML.slice(0, -2);
    display.innerHTML = str;
};

document.getElementById('demoForm').onsubmit = function(e) {
    // reference to select list using this keyword and form elements collection
    // no callback function used this time
    var opts = getSelectedOptions( this.elements['demoSel[]'] );

    alert( 'The number of options selected is: ' + opts.length ); //  number of selected options

    return false; // don't return online form
};
</script>

how can i select multiple values without holding ctrl button

You can find your answer here: link

Matheno
– Matheno

2016-03-04 08:00:16 +00:00
Commented Mar 4, 2016 at 8:00 — Matheno
– Matheno, Commented Mar 4, 2016 at 8:00

Community · Accepted Answer · 2017-05-23 11:59:29Z

2

The following javascript function allows to select multiple items without using CTRL:

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

  var display = document.getElementById('display');

    // toggle selection
    if (el.hasAttribute('selected'))
            {el.removeAttribute('selected');
        var str = display.innerHTML;
        str = str.replace(new RegExp(el.value+",?"), '');
        display.innerHTML = str;
        }
    else {el.setAttribute('selected', ''); display.innerHTML += el.value + ', ';}

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


}
}

Source :source

I have modified to make it works with your code. Result: jsfiddle

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Mar 4, 2016 at 8:09

silviagreen

1,7291 gold badge18 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dominik · Accepted Answer · 2016-03-04 07:49:17Z

0

It's possible by overriding the normal behaviour of the mousedown event for your option-selector, setting it to just toggle the selected-state of the option like this:

$('option').mousedown(function(event) {
    event.preventDefault();
    $(this).prop('selected', !$(this).prop('selected')); // on => off => on
    return false;
});

answered Mar 4, 2016 at 7:49

Dominik

2,9262 gold badges37 silver badges47 bronze badges

1 Comment

Asesha Over a year ago

dominik i saw this solution somewhere in stackoverflow but i am not good in JavaScript. can you edit my javascript

Collectives™ on Stack Overflow

how select multiple values from html drop down list with out holding ctrl button

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related