javascript - 如何在输入字段中填充选定值

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/