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');
        }

如何关注下拉列表？

1 个答案: