Как добавить список с результатами, выбранными из ввода?

Question

У меня есть модал со списком и некоторыми опциями. Они получают из базы данных. Мне нужно сделать список / ввод с тем, что я выбрал в этом модальном. Могу ли я сделать это?

Вот мой список:

    <section> 
             <input type="text" class="form-control" id="populerNameKeyOrg" placeholder="Search for contacts" style="margin-top: 20px; margin-bottom: 20px; width: 38%">
              <label class="select">
                 @if(isset($replyMessage))
                   @foreach($users->contact as $user)
                         <ul id="destPopulerOrg">
                     <li class="countryOrg"><input name="target_id[]" type="checkbox" value="{{ $user->id }}" <?php if(isset($replyMessage)){ if($replyMessage == $user->id) { echo "selected"; } } ?>><span>{{ $user->username }}</span></li>
                             <ul>
                         @endforeach
                 @endif
               </label>
            </section>

Каждый вход имеет собственный идентификатор (идентификатор пользователя), как здесь <input name="target_id[]" type="checkbox" value="548">. Итак, мне нужно сделать что-то вроде Input с выбранными значениями (именами пользователей) в моем модале.

Answer 1

Правильное решение здесь:

Мой li:

<li class="country">  <input class="my_div" id="{{$user->username}}" name="target_id[]" type="checkbox" value="{{ $user->id }}" <?php if(isset($replyMessage)){ if($replyMessage == $user->id) { echo "selected"; } } ?>><span style="padding: 5px" class="name">{{ $user->username }}</span></li>

Div для результатов

Checked users: <div id="results"></div>

Скрипты

<script>
$(document).ready(displayCheckbox);

function displayCheckbox() {

    var checkboxes = $(".my_div");
    var results = $("#results");

    $.each(checkboxes, function() {
      $(this).change(printChecked);
    })

    function printChecked() {
        var checkedIds = [];

        checkboxes.each(function() {
            if($(this).is(':checked')) {
                checkedIds.push($(this).attr('id'));
            }
        });

        console.log(results);
        results.text(checkedIds);
    }
}


</script>

Answer 2

Попробуйте этот

 <section> 
   <input type="text" class="form-control" id="populerNameKeyOrg" placeholder="Search for contacts" style="margin-top: 20px; margin-bottom: 20px; width: 38%">
    <label class="select">
       @if(isset($replyMessage))
        @foreach($users->contact as $user)
          <ul id="destPopulerOrg">
           <li class="countryOrg"><input name="target_id[]" type="checkbox" value="{{ $user->id }}" <?php if(isset($replyMessage)){ if($replyMessage == $user->id) { echo "checked"; } } ?>><span>{{ $user->username }}</span></li>

          <ul>
         @endforeach
        @endif
    </label>
</section>

, кстати, обязательно замените selected на checked