I am trying to select all using the chosen plugin but I have failed in all my attempts. I am using the following code. Any help would be greatly appreciated. I implemented this using: 'select all' and 'remove all' with chosen.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/jpg" href="hanken_logo.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="chosen/chosen.min.css?v=<?php echo time(); ?>">
<link rel="stylesheet" href="css/bootstrap.min.css?v=<?php echo time(); ?>">
<title>Data Portal</title>
</head>
<body>
<div class="Header">
<p class="Message">Data</p>>
</div>
<div class="container_data">
Select Variables
<select multiple data-placeholder="Select..." class="chosen-select">
<option hidden selected value=""></option>
<option value="1">Firm Size</option>
<option value="2">Firm Age</option>
<option value="3">Market-to-Book</option>
<option value="4">Return on Assets</option>
<option value="5">Return on Equity</option>
</select>
<button class="select">Select all</button>
<button class="deselect">Deselect all</button>
<script src="jquery/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="chosen/chosen.jquery.min.js"></script>
<script type="text/javascript">
$('select').chosen();
$('.select').click(function(){
$('option').prop('selected', true);
$('select').trigger('liszt:updated');
});
$('.deselect').click(function(){
$('option').prop('selected', false);
$('select').trigger('liszt:updated');
});
</script>
</p>
</div>
</body>
</html>
