javascript - 如何从html下拉列表中选择多个值而无需按住ctrl按钮

我正在尝试使用html和JavaScript从下拉的选定值生成列表，我的代码工作正常。但是当我想选择多个值时，需要按住ctrl按钮。下面是我的表格

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

然后我的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>

我如何在不按住ctrl按钮的情况下选择多个值

最佳答案

以下javascript函数允许在不使用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

我已经进行了修改，使其可以与您的代码一起使用。
结果：jsfiddle