<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Select2 CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<select id="mySelect" multiple="multiple" style="width: 300px;" name="select_fruits[]">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="date">Date</option>
<option value="fig">Fig</option>
<option value="grape">Grape</option>
</select>
<script>
$(document).ready(function() {
$('#mySelect').select2({
placeholder: "Select fruits",
allowClear: true
});
});
</script>
$validated = $req->validate([
'name'=>'required',
'email'=>'required',
'phone' => 'required',
'selected_users' => 'required/array',
]);
// Convert the array to a comma-separated string
$selected_users = implode(',', $req->selected_users);
$data = DB::table('dietition')->insert([
'name' => $req->name,
'email' => $req->email,
'phone' => $req->phone,
'permission' => implode(',',$req->permission),
'alloted_users' => $selected_users
]);
Update form
<form action="{{ route('languages.update', $user->id) }}" method="POST">
@csrf
@method('PUT')
<label for="languages">Select Languages:</label>
<select name="languages[]" id="languages" class="form-control" multiple="multiple" style="width: 100%;">
@foreach($allLanguages as $language)
<option value="{{ $language->id }}" {{ in_array($language->id, $userLanguages) ? 'selected' : '' }}>
{{ $language->name }}
</option>
@endforeach
</select>
<button type="submit">Update</button>
</form>
// select tag
<select id="mySelect" multiple="multiple" style="width: 100%;" name="selected_users[]">
<?php
$data = DB::table('users')
->get();
$arr = explode(",",$d->alloted_users);
foreach($data as $d){
?>
<option value="{{$d->id}}" <?php if(in_array($d->id, $arr)){ echo 'selected'; } ?> >{{$d->email}}</option>
<?php } ?>
</select>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Select Dropdown</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.dropdown-container {
position: relative;
width: 300px;
}
.dropdown {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
background: white;
cursor: pointer;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown-content {
display: none;
position: absolute;
width: 100%;
background: white;
border: 1px solid #ccc;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
z-index: 1000;
max-height: 200px;
overflow-y: auto;
}
.dropdown-content label {
display: block;
padding: 8px;
cursor: pointer;
}
.dropdown-content label:hover {
background: #f1f1f1;
}
.selected-items {
font-size: 14px;
color: #555;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 250px;
}
</style>
</head>
<body>
<input type="hidden" name="childs" id="childs"><br/>
<div class="dropdown-container">
<div class="dropdown" id="multiSelectDropdown">
<span class="selected-items">Select Options</span>
▼
</div>
<div class="dropdown-content" id="dropdownOptions">
<label><input type="checkbox" value="Apple"> Apple</label>
<label><input type="checkbox" value="Banana"> Banana</label>
<label><input type="checkbox" value="Cherry"> Cherry</label>
<label><input type="checkbox" value="Grapes"> Grapes</label>
<label><input type="checkbox" value="Mango"> Mango</label>
</div>
</div>
<script>
$(document).ready(function(){
// Toggle dropdown visibility
$("#multiSelectDropdown").click(function(){
$("#dropdownOptions").toggle();
});
// Handle checkbox selection
$("#dropdownOptions input[type='checkbox']").change(function(){
let selected = [];
$("#dropdownOptions input[type='checkbox']:checked").each(function(){
selected.push($(this).val());
});
if(selected.length > 0) {
$(".selected-items").text(selected.join(", "));
$('#childs').val(selected.join(", "));
} else {
$(".selected-items").text("Select Options");
$('#childs').val();
}
});
// Close dropdown if clicked outside
$(document).click(function(e){
if (!$(e.target).closest(".dropdown-container").length) {
$("#dropdownOptions").hide();
}
});
});
</script>
</body>
</html>
<input type="hidden" name="childs" id="childs"><br/>
<div class="dropdown-container" id="student_id" style="width:100%">
<div class="dropdown" id="multiSelectDropdown">
<span class="selected-items">Select Child</span>
▼
</div>
<div class="dropdown-content" id="dropdownOptions">
<?php
$studentCount = DB::table('users')
->where('role', 'student')->orderby('id', 'desc')->get();
foreach($studentCount as $studentArr){ ?>
<label><input type="checkbox" value="{{$studentArr->id}}" values="{{$studentArr->name}}"> {{$studentArr->name}}</label>
<?php } ?>
</div>
</div><br/>
<script>
$(document).ready(function(){
// Toggle dropdown visibility
$("#multiSelectDropdown").click(function(){
$("#dropdownOptions").toggle();
});
// Handle checkbox selection
$("#dropdownOptions input[type='checkbox']").change(function(){
let selected = [];
let selectedVal = [];
$("#dropdownOptions input[type='checkbox']:checked").each(function(){
selected.push($(this).attr('values'));
selectedVal.push($(this).attr('value'));
});
if(selected.length > 0) {
$(".selected-items").text(selected.join(", "));
$('#childs').val(selected.join(", "));
$('#childs').val(selectedVal.join(", "));
} else {
$(".selected-items").text("Select Options");
$('#childs').val();
}
});
// Close dropdown if clicked outside
$(document).click(function(e){
if (!$(e.target).closest(".dropdown-container").length) {
$("#dropdownOptions").hide();
}
});
});
</script>
