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这个答案，但它仅适用于选择框但不适用于多个选择框

所以请建议我如何处理这个...我只是为此制作R＆amp; D我有最终解决方案使用复选框树而不是这个但是这将是一个非常冗长的任务......所以任何想法都是欢迎

谢谢和问候

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

Answer 2

请参阅http://jsfiddle.net/x5PKf/1511/

这个想法来自您链接的问题，在您的选择中添加data属性，并在此属性中保留先前的值。我在选择中添加了data-prev，在更改选择时，我将值存储在数据中。

$(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());
  });
});

Answer 3

你不能做这样的事吗，

$(function() {

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

我使用了焦点的点击事件。

Answer 4

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

这是我的最终解决方案......用于控制像multiselect一样，没有CTR或Shift

的麻烦

多个选择框，不使用ctr或shift

4 个答案: