JSFiddle - React, Tailwind, and code Playground
HTML
<div class="my_div">
<select name="selection" id="select_id">
<option>Select One</option>
<option value="0">A</option>
<option value="5">B</option>
<option value="6">C</option>
<option value="7">D</option>
<option value="8">D</option>
<option value="9">F</option>
</select>
</div>
<a class="links" href="#">Disable A C D</a>
<a class="links" href="#">Disable B E F</a>
<a class="enable" href="#">Enable A C D</a>
JavaScript
//console.log($('a.links').length);
//console.log($('.links a').length);
//console.log($('div.my_div #select_id').find('option').not('[value="0"], [value="6"], [value="7"]').length);
$('a.links').click(function() {
var txt = $(this).text();
if (txt == 'Disable A C D') {
$('div.my_div #select_id').find('option').map(function() {
return $(this).parent('span').length == 0 ? this : null;
}).wrap('<span>').hide();
$('div.my_div #select_id').find('option').not('[value="0"], [value="6"], [value="7"]').unwrap().show().first().attr('selected', 'selected');
}
});
$('a.enable').click(function() {
$('div.my_div #select_id').find('option').map(function() {
return $(this).parent('span').length == 0 ? this : null;
}).wrap('<span>').hide();
$('div.my_div #select_id').find('option').unwrap().show().first().attr('selected', 'selected');
});