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複選框選擇

回答

相關問題