選択したチェックボックスを表示するドロップダウン

Question

助けてください。

アイコンで選択したチェックボックスを表示する2つのドロップダウンを作成しました。 問題は2つのドロップダウンが独立して動作していないことです。

ドロップダウン2で何かを変更した場合（スペースにはどんなセキュリティがありますか） ドロップダウン1のすべてのコンテンツも追加されます。

複数のドロップダウンを操作するには、ドロップダウン機能が必要です。

注：選択したチェックボックスにアイコンを追加する必要があります。選択されたチェックボックスが表示されているドロップダウントグルdivの :)

また、選択したチェックボックスがすぐに表示されません。私が選択したチェックボックス

https://jsfiddle.net/gilbertlucas46/szyz4031/4/

function getValueUsingClass(){ 
 
    $(".checkbox-list li label").click(function() { 
 
     /* declare an checkbox array */ 
 
    var features_checkedBox = [] 
 
    /* look for all checkboes that have a class 'chk' attached to it and check if it was checked */ 
 
     $(" .checkbox-list li input:checked + label").each(function() { 
 
      allChecked = $(this).html(); 
 
      features_checkedBox.push(allChecked); 
 
      $(this).parents('.dropdown').find('.dropdown-toggle').html('<span class="selections">' + features_checkedBox + '<i class="glyphicon glyphicon-menu-down"> </i> </span>'); 
 
     }); 
 
    }) \t 
 
} 
 

 
getValueUsingClass(); 
 
$('.dropdown-menu').on('click', function(e) { 
 
     if($(this).hasClass('checkbox-list')) { 
 
      e.stopPropagation(); 
 
     } 
 
    });

.dropdown-select .dropdown-toggle { 
 
    background: #71c621; 
 
    background: linear-gradient(135deg, #71c621 0%, #5bab41 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#71c621', endColorstr='#5bab41',GradientType=1); 
 
    width: 100%; 
 
    height: 42px; 
 
    line-height: 42px; 
 
    padding: 0; 
 
    font-size: 14px !important; 
 
    font-weight: normal; 
 
    border: 2px solid #71c621; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.dropdown-select .dropdown-menu { 
 
    display: none; 
 
} 
 
.dropdown-select { 
 
    position: relative; 
 
} 
 
.dropdown-select.open .dropdown-menu { 
 
    display: block !important; 
 
    width: 100%; 
 
    top: 50px; 
 
} 
 
label { 
 
    cursor: pointer; 
 
    display: block; 
 
    border-bottom: 1px solid gray; 
 
    width: 100%; 
 
} 
 
input { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<div class="row"> 
 

 
    <div class="col col-md-6"> 
 
    <fieldset data-form-field="required-group" class="suitability"> 
 
     <legend>What is the space suitable for </legend> 
 
     <div class="button-group dropdown dropdown-select checkDropdowns"> 
 
     <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Suitable for? <i class="glyphicon glyphicon-menu-down"> </i></a> 
 
     <ul class="checkbox-list dropdown-menu"> 
 
     <li> 
 
      <input type="checkbox" id="transactable-storage-purpose-clothes" value="Clothes" data-required-group="storage_purpose" data-storage-purpose=""> 
 
      <label for="transactable-storage-purpose-clothes"> 
 
      <i class="glyphicon glyphicon-volume-off"></i> Clothes 
 
      </label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" id="transactable-storage-purpose-caravan" value="Caravan" data-required-group="storage_purpose" data-storage-purpose=""> 
 
      <label for="transactable-storage-purpose-caravan"> 
 
      <i class="glyphicon glyphicon-flag"></i> Caravan 
 
      </label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" id="transactable-storage-purpose-boat" value="Boat" data-required-group="storage_purpose" data-storage-purpose=""> 
 
      <label for="transactable-storage-purpose-boat"> 
 
      <i class="glyphicon glyphicon-headphones"></i> Boat 
 
      </label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" id="transactable-storage-purpose-car" value="Car" data-required-group="storage_purpose" data-storage-purpose=""> 
 
      <label for="transactable-storage-purpose-car"> 
 
      <i class="glyphicon glyphicon-backward"></i>Car 
 
      </label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" id="transactable-storage-purpose-furniture" value="Furniture" data-required-group="storage_purpose" data-storage-purpose=""> 
 
      <label for="transactable-storage-purpose-furniture"> 
 
      <i class="glyphicon glyphicon-resize-small"></i> Furniture 
 
      </label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" id="transactable-storage-purpose-docs" value="Office Docs" data-required-group="storage_purpose" data-storage-purpose=""> 
 
      <label for="transactable-storage-purpose-docs"> 
 
      <i class="glyphicon glyphicon-plane"></i> Office Docs 
 
      </label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" id="transactable-storage-purpose-trailer" value="Trailer" data-required-group="storage_purpose" data-storage-purpose=""> 
 
      <label for="transactable-storage-purpose-trailer"> 
 
      <i class="glyphicon glyphicon-magnet"></i> Trailer 
 
      </label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" id="transactable-storage-purpose-workshop" value="Workshop" data-required-group="storage_purpose" data-storage-purpose=""> 
 
      <label for="transactable-storage-purpose-workshop"> 
 
      <i class="icon icon-workshop"></i> Workshop 
 
      </label> 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" id="transactable-storage-purpose-container" value="Container" data-required-group="storage_purpose" data-storage-purpose=""> 
 
      <label for="transactable-storage-purpose-container"> 
 
      <i class="glyphicon glyphicon-leaf 
 
glyphicon "></i> Container 
 
      </label> 
 
     </li> 
 
     </ul> 
 
     </div> 
 
    </fieldset> 
 
    </div> 
 
    
 
</div> 
 
<div class="row"> 
 
    <div class="col col-md-6"> 
 
    <fieldset class="security"> 
 
     <legend>What security does the space have <a href="#" data-toggle="popover" data-content="Let prospective renters know what security features your space has. You can select multiple options."> 
 
      <i class="fa fa-question-circle"></i></a></legend> 
 
     <div class="button-group dropdown dropdown-select checkDropdowns detailsDrop"> 
 
     <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Select Security Features <i class="glyphicon glyphicon-menu-down"> </i></a> 
 
     <ul class="checkbox-list dropdown-menu"> 
 
      
 
      
 
      <li data-value="<i class='icon icon-alarm'"> 
 
       <input type="checkbox" id="transactable-security-alarm" value="4750" data-security=""> 
 
       <label for="transactable-security-alarm"> 
 
       <i class="icon icon-alarm"></i> <span class="title">Alarm</span> 
 
       </label> 
 
      </li> 
 
      
 
      <li data-value="<i class='icon icon-cctv'"> 
 
       <input type="checkbox" id="transactable-security-cctv" value="4751" data-security=""> 
 
       <label for="transactable-security-cctv"> 
 
       <i class="icon icon-cctv"></i> <span class="title">CCTV</span> 
 
       </label> 
 
      </li> 
 
      
 
      <li data-value="<i class='icon icon-deadlock'"> 
 
       <input type="checkbox" id="transactable-security-deadlock" value="4752" data-security=""> 
 
       <label for="transactable-security-deadlock"> 
 
       <i class="icon icon-deadlock"></i> <span class="title">Deadlock</span> 
 
       </label> 
 
      </li> 
 
      
 
      <li data-value="<i class='icon icon-security-bars'"> 
 
       <input type="checkbox" id="transactable-security-security-bars" value="5960" data-security=""> 
 
       <label for="transactable-security-security-bars"> 
 
       <i class="icon icon-security-bars"></i> <span class="title">Security Bars</span> 
 
       </label> 
 
      </li> 
 
      
 
      <li data-value="<i class='icon icon-lock'"> 
 
       <input type="checkbox" id="transactable-security-combination-lock" value="4753" data-security=""> 
 
       <label for="transactable-security-combination-lock"> 
 
       <i class="icon icon-lock"></i> <span class="title">Combination Lock</span> 
 
       </label> 
 
      </li> 
 
      
 
      <li data-value="<i class='icon icon-roller-door'"> 
 
       <input type="checkbox" id="transactable-security-security-roller-door" value="4754" data-security=""> 
 
       <label for="transactable-security-security-roller-door"> 
 
       <i class="icon icon-roller-door"></i> <span class="title">Security Roller-door</span> 
 
       </label> 
 
      </li> 
 
      
 
     </ul><!-- checkbox-list dropdown-menu --> 
 
     </div> 
 
    </fieldset> 
 
    </div> 
 
</div>

Answer 1

を表示するために再びそれをクリックする必要があなたのコードに問題が$(" .checkbox-list li input:checked + label")がドロップダウンに応じて、ハンドラが呼び出されたされていないということです。 さらに、最初の値は、入力の変更イベントの間にディスクリートがあるために認識されません。

私は少しあなたのコードを変更：

$('.checkbox-list input').on('change', function() { 
    var $this = $(this).parents('.checkbox-list'); 
    var features_checkedBox = []; 

    $this.find('input:checked').each(function() { 

    allChecked = $(this).next('label').html(); 
    features_checkedBox.push(allChecked); 
    $(this).parents('.dropdown').find('.dropdown-toggle').html('<span class="selections">' + features_checkedBox + '<i class="glyphicon glyphicon-menu-down"> </i> </span>'); 

    }); 

}); 

---

Example

あなたは、あなたのニーズに合わせて例を最適化することができます。