Изкарване на нови редове, за да се виждат всички избрани checkbox-ове

DeathGuard_

Registered
Здравейте,
отново срещам спънка. Правя нещо като профил на пациент (ветеринарен сайт), при което трябва да могат да се избират няколко манипулации наведнъж от наличните в базата данни.
Използвам <select><option> падащо меню, което измайсторих с checkbox-ове, за да може да се избират няколко артикули от всички възможни. Проблемите ми са 2:
1 - Когато се изберат повече от 3-4 артикула, които излизат в лентата като избрани искам височината на менюто да се увеличава или още по-добре - всяка избрана манипулация да излиза на нов ред, за да не скрива изборите, когато станат повече от 3-4. Пробвах какво ли не, включително добавих в javascripta да изкарва нови редове
Код:
if (values.length > 0) {
    dropdownValue = values.join(' + ');
    document.write("\n"); //тук опитвам да изкара нов ред при всеки избран чекбокс, но изкарва бяла страница...
	  }
, но не става.
2 - Как мога да направя да сумира цените на всички избрани артикули и да го изкарам като променлива отдолу?
Прилагам снимки, за да ми схванете проблема.
Благодаря предварително (последните години не съм кодирал и съм назад с нещата :D).

Това е javascript-а
Код:
<script type="text/javascript">
window.onload = (event) => {
  initMultiselect();
};

function initMultiselect() {
  checkboxStatusChange();

  document.addEventListener("click", function(evt) {
    var flyoutElement = document.getElementById('myMultiselect'),
      targetElement = evt.target; // clicked element

    do {
      if (targetElement == flyoutElement) {
        // This is a click inside. Do nothing, just return.
        //console.log('click inside');
        return;
      }

      // Go up the DOM
      targetElement = targetElement.parentNode;
    } while (targetElement);

    // This is a click outside.
    toggleCheckboxArea(true);
    //console.log('click outside');
  });
}

function checkboxStatusChange() {
  var multiselect = document.getElementById("mySelectLabel");
  var multiselectOption = multiselect.getElementsByTagName('option')[0];

  var values = [];
  var checkboxes = document.getElementById("mySelectOptions");
  var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');

  for (const item of checkedCheckboxes) {
    var checkboxValue = item.getAttribute('value');
    values.push(checkboxValue);
  }

  var dropdownValue = "Не са извършвани";
  if (values.length > 0) {
    dropdownValue = values.join(' + ');
	  }

  multiselectOption.innerText = dropdownValue;
}

function toggleCheckboxArea(onlyHide = false) {
  var checkboxes = document.getElementById("mySelectOptions");
  var displayValue = checkboxes.style.display;

  if (displayValue != "block") {
    if (onlyHide == false) {
      checkboxes.style.display = "block";
    }
  } else {
    checkboxes.style.display = "none";
  }
} </script>

Така изкарвам менюто:
Код:
<div class="container-fluid">

  <div class="form-group col-sm-8">
    <label for="myMultiselect">Манипулации:*</label>
    <div id="myMultiselect" class="multiselect">
      <div id="mySelectLabel" class="selectBox" onclick="toggleCheckboxArea()">
        <select class="form-select" name="manipulations" style="height:40px;">
          <option>somevalue</option>
        </select>
        <div class="overSelect"></div>
      </div>
      <div id="mySelectOptions" align="left">
<?php
$choosemanip=mysql_query("SELECT * FROM manipulations ORDER BY chestota ASC, id ASC");
	  while($rowchoosemanip=mysql_fetch_array($choosemanip)){
	  $namechoosemanip=$rowchoosemanip['name'];
	  $pricechoosemanip=$rowchoosemanip['price'];
echo "<label for='$namechoosemanip'><input type='checkbox' id='$namechoosemanip' onchange='checkboxStatusChange()' value='$namechoosemanip' /> $namechoosemanip - $pricechoosemanip лв.</label>";
}
?>
 
      </div>
    </div>
  </div>
</div>
 

Прикачени файлове

  • 1.png
    1.png
    5.8 KB · Преглеждания: 205
  • 2.png
    2.png
    41.8 KB · Преглеждания: 205
  • 3.png
    3.png
    48.9 KB · Преглеждания: 205
По скоро ти трябва нещо такова като структира
http://loudev.com/
https://www.jqueryscript.net/demo/Lightweight-Multi-select-Combo-Box-Plugin-For-jQuery-SelectListActions/
https://crlcu.github.io/multiselect/examples/zero-configuration.html
 

Горе