JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<div style="padding:10px;width:200px;">
	<select id="du_select" class="ui fluid dropdown" name="du_graph_types" multiple="">
		<option value="">Select DU</option>
		<option value="all">All</option>
		<option value="copper">Copper</option>
		<option value="fiber">Fiber</option>
		<option value="common">Common</option>
	</select>
</div>

JavaScript

$('#du_select').dropdown({
		onChange: function(value, text, $selectedItem) {
			// custom action
			if (value.length > 1 && value.includes('all')) {
				const index = value.indexOf('all');
				if (index > -1) {
					value.splice(index, 1);
				}
				console.log('sel_items : ' + value)
				$('#du_select').dropdown('clear').dropdown('set selected',value)
				//$('#du_select').;
				alert('Before selecting "All", clear the existing DU type')
			}
			
		}
	});