Question

我有一个带有输入字段的引导程序下拉列表，我的下拉列表包含用于选择多个值的复选框

我要做的是，当用户检查任何下拉菜单时，应该在输入字段中填充逗号分隔符，以便用户可以选择多个用户

我想做的棘手的部分是

-在我的下拉菜单中，我目前有3个下拉菜单，它们的值和文本不同

这些是文本：dheeraj值：draj.121@gmail.com，依此类推
所以下拉菜单中我将文本显示为dheeraj，但是当用户单击用户时，我想用draj.121@gmail.com填充输入字段，这是该下拉菜单的值

$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
  $(this).closest("li").toggleClass("active", this.checked);
});

$(document).on('click', '.allow-focus', function(e) {
  e.stopPropagation();
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
  <label for="subCategoryCode">TO :</label>
  <div class="input-group">
    <input type="text" class="form-control" aria-label="Text input with dropdown button" name="To" id="To">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
      <ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1">

        <li><label> <input type="checkbox"
							value="draj.121@gmail.com"> Dheeraj
					</label></li>

        <li><label> <input type="checkbox"
							value="raju.45@gmail.com"> Raju
					</label></li>

        <li><label> <input type="checkbox"
							value="ravi456@gmail.com"> Ravi
					</label></li>


      </ul>
    </div>
  </div>
</div>

以及当用户取消选中复选框时，我想从输入字段

中删除该值

请有人给我一些想法，谢谢

Answer 1

您需要遍历复选框，然后将值附加到变量并分配给这样的文本字段

$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
 $(this).closest("li").toggleClass("active", this.checked);
 var sList = "";
 $('input[type=checkbox]').each(function () {
    if(this.checked) {
        sList += $(this).val() + ","
    }
});

 $("#To").val(sList.slice(0,-1));
});

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

http://jsfiddle.net/6h1074bL/

如何在输入字段中填充所选值

1 个答案: