Как сохранить фокус на раскрывающемся списке?

Question

Я создал раскрывающийся список с несколькими выборами. В настоящее время, когда выбран вход, если пользователь нажимает на метку, чтобы сделать выбор, раскрывающийся список исчезает. Если они нажимают на фактический флажок, список остается в фокусе. Я хотел бы сфокусироваться на выпадающем списке, пока пользователь не сделает свой выбор и не нажмет кнопку «Отправить»; независимо от того, где они нажимают внутри списка. Я пробовал различные комбинации функций прослушивания кликов и фокусов, а также играл с атрибутами Bootstrap data, но ничего не работает.

 function ddInputsChanged($inputs, $outputWrapper) { 
 
      var $inputs = $('#ddDistrict input'); 
 
      var $outputWrapper = $('#lblDistrict'); 
 
      var outputLabel = 'All'; 
 
      var firstChecked = true; 
 

 
      $inputs.each(function() { 
 
      if (this.checked) { 
 
       var currentLabel = $(this).next('label').text(); 
 

 
       if (firstChecked == true) { 
 
       firstChecked = false; 
 
       outputLabel = currentLabel; 
 
       } else 
 
       outputLabel = outputLabel + ', ' + currentLabel; 
 
      } 
 
      }); 
 

 
      $outputWrapper.text(outputLabel); 
 
     }

<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.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="col-lg-12"> 
 
    <div class="button-group" style="padding: 7px 0px 7px 0px; margin-left: 18px;"> 
 
    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span>&nbsp;Districts&nbsp;<span class="caret"></span> 
 
    </button> 
 
    <ul id="ddDistrict" class="dropdown-menu"> 
 
     <li> 
 
     <input type="checkbox" id="inpDist1" value="1"> 
 
     <label for="inpDist1" class="input small" data-value="1">District 1 (Porter)</label> 
 
     </li> 
 
     <li> 
 
     <input type="checkbox" id="inpDist2" value="2"> 
 
     <label for="inpDist2" class="input small" data-value="2">District 2 (Jones Jr.)</label> 
 
     </li> 
 
     <li> 
 
     <input type="checkbox" id="inpDist3" value="3"> 
 
     <label for="inpDist3" class="input small" data-value="3">District 3 (Horne)</label> 
 
     </li> 
 
     <li> 
 
     <input type="checkbox" id="inpDist4" value="4"> 
 
     <label for="inpDist4" class="input small" data-value="4">District 4 (Haddaway)</label> 
 
     </li> 
 
     <li> 
 
     <input type="checkbox" id="inpDist5" value="5"> 
 
     <label for="inpDist5" class="input small" data-value="5">District 5 (Duncan)</label> 
 
     </li> 
 
     <li> 
 
     <input type="checkbox" id="inpDist6" value="6"> 
 
     <label for="inpDist6" class="input small" data-value="6">District 6 (Willner)</label> 
 
     </li> 
 
     <li> 
 
     <input type="checkbox" id="inpDist7" value="7"> 
 
     <label for="inpDist7" class="input small" data-value="7">District 7 (Brady)</label> 
 
     </li> 
 
     <li> 
 
     <button type="button" class="btn btn-default btn-sm btn-info center-block" onclick="ddInputsChanged('#ddDistrict input', '#lblDistrict');">Submit</button> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-lg-12"> 
 
    <div id="lblDistrict"></div> 
 
    </div> 
 
</div>

Answer 1

Это, казалось, сделать трюк в небольшой тест. Добавлено прекращение распространения и добавленный код, чтобы закрыть меню после отправки.

$(document).on('click', '.dropdown-menu', function (e) { 
    e.stopPropagation(); 
}); 

function ddInputsChanged($inputs, $outputWrapper) { 
      var $inputs = $('#ddDistrict input'); 
      var $outputWrapper = $('#lblDistrict'); 
      var outputLabel = 'All'; 
      var firstChecked = true; 

      $inputs.each(function() { 
      if (this.checked) { 
       var currentLabel = $(this).next('label').text(); 

       if (firstChecked === true) { 
       firstChecked = false; 
       outputLabel = currentLabel; 
       } else 
       outputLabel = outputLabel + ', ' + currentLabel; 
      } 
      }); 

      $outputWrapper.text(outputLabel); 

    $(".open").removeClass('open'); 
     }