Выпадающий список 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

@ сабит Спасибо за помощь, Это сработало для меня. но с небольшой проблемой. Когда я нажимаю на флажок, данные не добавляются к текстовому полю ввода. когда я нажимаю на страницу, тогда данные присоединяются к текстовому окну – Navyah

. Я создал edit @Navyah – sabith

Выпадающий список MultiSelect с выбором флажка с помощью jQuery

ответ

Смежные вопросы