Multiple select dropdown

Multiple select dropdown

 

<div class="dropdown"> 
<input type="text" name="select_attributes" class="tf-button dropdown-toggle"
type="button" 
id="multiSelectDropdown"
data-bs-toggle="dropdown" 
aria-expanded="false" placeholder="Select" /> 

<!-- </button> -->
<ul class="dropdown-menu" 
aria-labelledby="multiSelectDropdown" style="width:100%; height:auto"> 

<?php 
$attributes = DB::table('attributes')->distinct()->get(['attribute_name']);
foreach ($attributes as $key => $attribute) {

?>
<li style="padding:10px;"> 
<label> 
<input type="checkbox" 
value="<?php echo $attribute->attribute_name; ?>"> 
<span style="font-size:16px; margin-left:10px;"><?php echo $attribute->attribute_name; ?></span>
</label> 
</li> 
<?php 
}
?>


</ul> 
</div>
<script> 

const chBoxes = 
document.querySelectorAll('.dropdown-menu input[type="checkbox"]'); 
const dpBtn = 
document.getElementById('multiSelectDropdown'); 
let mySelectedListItems = []; 

function handleCB() { 
mySelectedListItems = []; 
let mySelectedListItemsText = ''; 

chBoxes.forEach((checkbox) => { 
if (checkbox.checked) { 
mySelectedListItems.push(checkbox.value); 
mySelectedListItemsText += checkbox.value + ', '; 
} 
}); 

dpBtn.value = 
mySelectedListItems.length > 0 
? mySelectedListItemsText.slice(0, -2) : 'Select'; 
} 

chBoxes.forEach((checkbox) => { 
checkbox.addEventListener('change', handleCB); 
}); 

</script>
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> 
</head> 

<body> 
<div class="container"> 
<h2> 
  Multiple Selection Dropdown with Checkbox 
</h2> 

<div class="dropdown"> 
<button class="btn btn-success dropdown-toggle" type="button" id="multiSelectDropdown" 
data-bs-toggle="dropdown" aria-expanded="false"> 
Select 
</button> 

<ul class="dropdown-menu" aria-labelledby="multiSelectDropdown"> 

<li> 
<label> 
<input type="checkbox" value="Java"> Java 
</label> 
</li> 

<li> 
<label> 
<input type="checkbox" value="C++"> 
C++ 
</label> 
</li> 

<li> 
<label> 
<input type="checkbox" value="Python">Python</label> 
</li> 

</ul> 
</div> 
</div> 


<script> 

const chBoxes = document.querySelectorAll('.dropdown-menu input[type="checkbox"]'); 
const dpBtn = document.getElementById('multiSelectDropdown'); 
let mySelectedListItems = []; 

function handleCB() { 
  mySelectedListItems = []; 
  let mySelectedListItemsText = ''; 
  chBoxes.forEach((checkbox) => { 
  if (checkbox.checked) { 
     mySelectedListItems.push(checkbox.value); 
     mySelectedListItemsText += checkbox.value + ', '; 
   } 
}); 

  dpBtn.innerText = mySelectedListItems.length > 0 ? mySelectedListItemsText.slice(0, -2) : 'Select'; 
} 

chBoxes.forEach((checkbox) => { 
  checkbox.addEventListener('change', handleCB); 
}); 

</script> 

</body> 
</html>

 

 

 

 

Leave a Reply