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