конвертировать отмеченные флажки в выбранные опции и добавить к выбранным

Question

В моих результатах поиска выводится <input type="checkbox" name="participants" id="participants" value="<?php echo $id ?>"><p style="display: initial;"><?php echo $fullname."(center name:$center)" ?></p>

, а мой вывод выглядит как

, а мой выходной код выглядит как

<div class="row" id="searchstudents">
            <div class="col-lg-4">
        <input type="checkbox" name="participants" id="participants" value="1"><p style="display: initial;">karthik gone(center name:srnagar)</p>
        </div>
            <div class="col-lg-4">
        <input type="checkbox" name="participants" id="participants" value="2"><p style="display: initial;">laxmi(center name:vvnagar)</p>
        </div>
            <div class="col-lg-4">
        <input type="checkbox" name="participants" id="participants" value="4"><p style="display: initial;">ram(center name:vvnagar)</p>
        </div>
            <div class="col-lg-4">
        <input type="checkbox" name="participants" id="participants" value="5"><p style="display: initial;">srikanth(center name:srnagar)</p>
        </div>
            <div class="col-lg-4">
        <input type="checkbox" name="participants" id="participants" value="6"><p style="display: initial;">narayana(center name:vvnagar)</p>
        </div>
            <div class="col-lg-4">
        <input type="checkbox" name="participants" id="participants" value="9"><p style="display: initial;">vivek(center name:vvnagar)</p>
        </div>
            <div class="col-lg-4">
        <input type="checkbox" name="participants" id="participants" value="10"><p style="display: initial;">ghtfr(center name:vvnagar)</p>
        </div>
            <div class="col-lg-4">
        <input type="checkbox" name="participants" id="participants" value="11"><p style="display: initial;">karthik g(center name:vvnagar)</p>
        </div>
</div>

вот что я делаю после того, как несколько флажков отмечены и нажмите кнопку «добавить к участникам», чтобы добавить это участие в раскрывающийся список, означает преобразовать в параметр и добавить в список выбора.

Помогите мне, что делать?

Answer 1

Когда флажок установлен, вы можете создать и добавить элемент option к элементу select, который содержит текст в теге p:

document.getElementById('searchstudents').addEventListener('change', addToSelectList);
const selectElement = document.getElementById('mySelect');
function addToSelectList() {
    let selected = event.target;
    
    if(!selected.checked)	{
    	let index = document.getElementById(`option${selected.value}`).index;
    	selectElement.remove(index);
      return;
    }
    
    let text = selected.nextElementSibling.textContent;
    let option = document.createElement('OPTION');
    option.textContent = text;
    option.id = 'option' + selected.value;
    selectElement.appendChild(option);
}

body {
  display: flex;
  justify-content: space-around;
}

#mySelect {
  height: 2em;
}

<div class="row" id="searchstudents">
        <div class="col-lg-4">
        <input type="checkbox" name="participants" class="participants" value="1"><p style="display: initial;">karthik gone(center name:srnagar)</p>
        </div>
            <div class="col-lg-4">
        <input type="checkbox" name="participants" class="participants" value="2"><p style="display: initial;">laxmi(center name:vvnagar)</p>
        </div>
            <div class="col-lg-4">
        <input type="checkbox" name="participants" class="participants" value="3"><p style="display: initial;">ram(center name:vvnagar)</p>
        </div>
            <div class="col-lg-4">
        <input type="checkbox" name="participants" class="participants" value="4"><p style="display: initial;">srikanth(center name:srnagar)</p>
        </div>
            <div class="col-lg-4">
        <input type="checkbox" name="participants" class="participants" value="5"><p style="display: initial;">narayana(center name:vvnagar)</p>
        </div>
            <div class="col-lg-4">
        <input type="checkbox" name="participants" class="participants" value="6"><p style="display: initial;">vivek(center name:vvnagar)</p>
        </div>
            <div class="col-lg-4">
        <input type="checkbox" name="participants" class="participants" value="7"><p style="display: initial;">ghtfr(center name:vvnagar)</p>
        </div>
            <div class="col-lg-4">
        <input type="checkbox" name="participants" class="participants" value="8"><p style="display: initial;">karthik g(center name:vvnagar)</p>
        </div>
</div>
<br>
<select id="mySelect">
</select>

Answer 2

Я думаю, это то, что вы просили:

$(document).ready(function() {
 $("input[type=button]").click(function() {
    $('input:checked').each(function() {
      var newOption = new Option($(this).parent().find("p").html(),$(this).val() , true, true);
      $('select').append(newOption);
    })
  });
});

@ edit fixed fiddle https://jsfiddle.net/wp2acsjn/5/