javascript - 不使用 ctr 或 shift 的多选框

Question

首先让我弄清楚我要做什么......

我正在尝试使用多个选择框做一些技巧......就像每次我想在选择多个值之前按 Ctr 或 Shift ......我想从这里出来

所以这是我的选择框

  <select style='width:200%;height:200px'  name='subCat_574' multiple='multiple'  id='subCat_574' >  
     <optgroup label='7.3 Medidas colectivas de proteccion'>
        <option value='26'>7.3.2 se?alizacion del area </option>
        <option value='27'>7.3.4 control de acceso </option>
        <option value='28'>7.3.5 manejo de desniveles y orificios (huecos) </option>
        <option value='29'>7.3.3 barandas </option>
    </optgroup>
     <optgroup label='7.4 Medidas de proteccion contra caidas'>
        <option value='30'>7.4.2.5 otras consideraciones </option>
        <option value='31'>7.4.2 medidas activas de proteccion </option>
    </optgroup>  
     <optgroup label='7.4.2.1 Sistemas de proteccion contra caidas (equipos) para seguridad en trabajos en altura.'>
        <option value='32'>7.4.2.1 sistemas de proteccion contra caidas (equipos) para seguridad en trabajos en altura. </option></optgroup>  
     <optgroup label='7.4.2.2 Andamios'>
        <option selected value='33'>7.4.2.2 andamios </option>
    </optgroup>  
     <optgroup label='7.4.2.2. Nota 4 mensulas'>
        <option selected value='34'>7.4.2.2. nota 4 mensulas </option>
    </optgroup>  
     <optgroup label='7.4.2.3 Escaleras portatiles'>
        <option value='35'>7.4.2.3 escaleras portatiles </option>
    </optgroup> 
     <optgroup label='7.4.2.4 Proteccion contra caidas en carro tanques'>
        <option value='36'>7.4.2.4 proteccion contra caidas en carro tanques </option>
    </optgroup>
 <select/>




<script src="jquery-1.7.min.js"></script>
 <script>


 $( "#subCat_574" ).change(function() {
       alert($("#subCat_574").val());
    alert( "Handler for .change() called." );
});
 </script>

即使我检查了 http://jsfiddle.net/x5PKf/766/，我也试过了这个答案 enter link description here但它只适用于选择框而不适用于多个选择框

所以请建议我如何处理这个......我只是为此进行研发我有最终解决方案使用复选框树而不是这个但是这将是一个非常漫长的任务......所以欢迎任何想法

感谢和问候

Answer 1

HTML 代码

<select name="test" multiple>
    <option value="stack">Stack</option>
    <option value="overflow">Overflow</option>
    <option value="my">My</option>
    <option value="question">Question</option>
</select>
<div id="log"></div>

jQuery 代码

(function () {
    var previous;

    $("select[name=test] option").focus(function () {
        // Store the current value on focus, before it changes
        previous = this.value;
    }).click(function() {
        // Do soomething with the previous value after the change
        document.getElementById("log").innerHTML = "<b>Previous: </b>"+previous;

        previous = this.value;
    });
})();

JS Fiddle