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

C++ JAVA
Правила на форума
Моля, маркирайте отговора на потребитeля, който най-много ви е помогнал за решаването на проблема/въпроса Ви!
Повече за системата за оценяване може да прочетете тук: viewtopic.php?f=28&t=130265
Аватар

Topic author
DeathGuard_
Пристрастен
Пристрастен
Reactions: 0
Мнения: 1978
Регистриран на: Съб Сеп 27, 2008 9:17 pm
Support: 207
13
Местоположение: Наоколо...
Обратна връзка:

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

Мнение от DeathGuard_ »

Здравейте,
отново срещам спънка. Правя нещо като профил на пациент (ветеринарен сайт), при което трябва да могат да се избират няколко манипулации наведнъж от наличните в базата данни.
Използвам <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>
Изображение
Прикачени файлове
3.png
2.png
1.png
1.png (5.81 KiB) Преглеждано 88 пъти

uphero
Добре познат
Добре познат
Reactions: 8
Мнения: 819
Регистриран на: Пон Фев 20, 2012 12:26 pm
Support: 37
9
Местоположение: Казанлък
Обратна връзка:

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

Мнение от uphero »

По скоро ти трябва нещо такова като структира
http://loudev.com/
https://www.jqueryscript.net/demo/Light ... stActions/
https://crlcu.github.io/multiselect/exa ... ation.html
Публикувай отговор