Multiple select box without using ctr or shift

Question

first let me clear what I am trying to do ......

I am trying to do some trick with multiple select box....like every time I want to press Ctr or Shift before selecting multiple value ...I want to come out from this

so this is my select box

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

I tried this even I checked http://jsfiddle.net/x5PKf/766/ this answer for enter link description here but it is working for only select box but not for multiple select box

So please suggest me how I can deal with this ...I am just making R&D for this I have final solution to use checkbox tree instead of this but it will be very lengthy task ...so any Idea are welcome

Thanks and regards

score 1 · Answer 1 · answered Oct 29 '14 at 05:18

HTML Code

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

(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

score 1 · Answer 2 · answered Oct 29 '14 at 05:25

See http://jsfiddle.net/x5PKf/1511/

The idea is from the question you linked to, add a data attribute to your selection and keep the previous valu in this attribute. I added data-prev to the selection and on changing the selection I store the value inside data.

$(document).ready(function(){
  $("#subCat_574").change(function(data){
     var $this = $(this);
      document.getElementById("log2").innerHTML = "<b>Previous: </b>"+ $this.data("prev");
     $this.data("prev", $this.val());
  });
});

score 1 · Answer 3 · answered Oct 29 '14 at 05:47

Can't you do something like this,

$(function() {

    var previous = "";
    $("select[name=subCat_574]").click(function () {
        previous = $(this).val();
    }).change(function() {
        if( previous != "" )
            alert("Previous: "+previous);        
        previous = this.value;
    });
});

I used clicked event insted of focus.

score 1 · Accepted Answer · answered Oct 29 '14 at 06:16

 <select onchange="myCustomMultySelect(574)" style='width:100%;height:100px'  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>
<input type="text"  name="txtSubCat_574" id="txtSubCat_574" value="33,34"/>

 <script src="jquery-1.7.min.js"></script>
 <script>
 function myCustomMultySelect(id)
 {
    newVal = $("#subCat_"+id).val();
    oldVal = $("#txtSubCat_"+id).val();
    if (oldVal.indexOf(newVal) >= 0)
    {
        oldVal =     oldVal.replace(newVal, "");

        $("#txtSubCat_"+id).val(oldVal);
    }else
    {
        $("#txtSubCat_"+id).val(oldVal+","+newVal);
    }



    changedValText = $("#txtSubCat_"+id).val();



    var dataarray   =  changedValText.split(",");
    $("#subCat_"+id).val(dataarray);
    $("#subCat_"+id).multiselect("refresh");

 }

 </script>

this is my final solution...for making control like multiselect without having this trouble of CTR or Shift

Multiple select box without using ctr or shift

4 Answers4