多选框，不使用ctr或shift

Multiple select box without using ctr or shift

本文关键字：ctr shift      更新时间：2023-09-26

首先让我明确我要做什么。。。。。。

我正在尝试用多选框做一些技巧。。。。就像每次我想在选择多个值之前按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/这个答案在这里输入链接描述，但它只适用于选择框，而不适用于多选框

所以请建议我如何处理这个。。。我只是在做R&D为此，我有使用复选框树代替此的最终解决方案，但这将是一项非常漫长的任务。。。所以任何想法都欢迎

感谢并问候

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

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

这个想法是从您链接到的问题中，将data属性添加到您的选择中，并在该属性中保留以前的valu。我在选择中添加了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());
  });
});

你不能这样做吗，

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

我用点击事件代替焦点。

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

这是我的最终解决方案。。。用于使控制类似于多选，而不存在CTR或Shift 的问题

相关文章：