如何从HTML下拉列表中选择多个值与出按住Ctrl键

Question

我想从下拉列表中选择使用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按钮

Answer 1

下面的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

Answer 2

它通过覆盖鼠标按下事件的正常行为为您的选择是可能的 - 选择器，将其设置为仅切换选项的选定状态，如下所示：

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