MultiSelect下拉选框使用jQuery复选框选择

我想创建一个多选的下拉框复选框手动使用jQuery。MultiSelect下拉选框使用jQuery复选框选择

我不想使用jQuery以外的任何内置库。我尝试过实现这个功能，但问题是，当我选中复选框时，数据将在输入字段中弹出，如果我第二次点击，我可以看到复选框没有被选中，数据也没有附加到前一个。

请告诉我我在代码中出错的地方。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Untitled Document</title> 
<style> 
    .multiselect { 
     width: 200px; 
    } 
    .selectBox { 
     position: relative; 
    } 
    .selectBox select { 
     width: 100%; 
     font-weight: bold; 
    } 
    .overSelect { 
     position: absolute; 
     left: 0; right: 0; top: 0; bottom: 0; 
    } 
    #presentationTable { 
     display: none; 
     border: 1px #dadada solid; 
    } 
    #presentationTable label { 
     display: block; 
    } 
    #presentationTable label:hover { 
     background-color: #1e90ff; 
    } 
</style> 

</head> 

<body> 
<form> 
    <div class="multiselect"> 
     <div class="selectBox" onClick="showCheckboxes()"> 
      <input type="text" id="presentatioonTableimputValue"><img src="http://siged.sep.gob.mx/analytics/res/s_blafp/uicomponents/obips.CommonIconSets/dropdownfilled_en_choicelistmulti.png" /> 
      <div class="overSelect"></div> 
     </div> 
     <div id="presentationTable"> </div> 
    </div> 
</form> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<script> 
    var expanded = false; 
    function showCheckboxes() 
    { 
     var abc = '<label><input type="checkbox" id="one" value="1"/>First1 checkbox</label> <label><input type="checkbox" id="two" value="two"/>Second checkbox </label> <label><input type="checkbox" id="three" value="three"/>Third checkbox</label>'; 
     $('#presentationTable').html(abc); 
       if (!expanded) { 
        $('#presentationTable').show(); 
        expanded = true; 
       } else { 
        $('#presentationTable').hide();   
        expanded = false; 
       }  
    } 


    function updateTextArea() 
    { 
     var allVals = []; 
     $('#presentationTable :checked').each(function() { 
      allVals.push($(this).val()); 
     }); 
     $('#presentatioonTableimputValue').val(allVals); 
    } 

    $(document).click(function(event){ 
     var $trigger = $(".multiselect"); 
     if($trigger !== event.target && !$trigger.has(event.target).length){ 
      $("#presentationTable").slideUp("fast"); 

      updateTextArea(); 
     }   
    });   
</script> 
</body> 
</html>

来源

2016-06-08 Navyah

你为什么不在jsfiddle.net或codepen.io上创建一个示例 – RanchiRhino

我很困惑。 _“使用纯Java脚本，我不想使用任何内置库”_，并且上面有'jquery' .... – ccasado

试试这个：

var expanded = false; 
populateCheckbox(); 
function populateCheckbox(){ 
    var abc = '<label><input type="checkbox" id="one" value="1"/>First1 checkbox</label> <label><input type="checkbox" id="two" value="two"/>Second checkbox </label> <label><input type="checkbox" id="three" value="three"/>Third checkbox</label>'; 
    $('#presentationTable').html(abc); 
} 
function showCheckboxes() 
{ 

      if (!expanded) { 
       $('#presentationTable').show(); 
       expanded = true; 
      } else { 
       $('#presentationTable').hide();   
       expanded = false; 
      }  
} 


function updateTextArea() 
{ 
     var allVals = []; 
     $('#presentationTable :checked').each(function() { 
      allVals.push($(this).val()); 
     }); 
     $('#presentatioonTableimputValue').val(allVals); 

    } 
$("#presentationTable label input").click(function(){ 
    updateTextArea(); 
}); 
$(document).click(function(event){ 
    var $trigger = $(".multiselect"); 
    if($trigger !== event.target && !$trigger.has(event.target).length){ 
     $("#presentationTable").slideUp("fast"); 

     // updateTextArea(); 
    }   
});

每次当你点击输入栏，它创造了新的复选框，这就是问题。希望它能解决你的问题。

来源

2016-06-08 07:18:20 sabith

我正要说同样的！很好，赶快抓住@sabith – ccasado

@ sabith感谢您的帮助，它为我工作。但有小问题，当我点击复选框时，数据不会被附加到输入文本字段。当我点击页面时，数据正在追加到文本框 – Navyah

现在检查。我做了一个编辑@Navyah – sabith

MultiSelect下拉选框使用jQuery复选框选择

回答

相关问题