hide selectmenu option

Hiding a select menu option works in regular javascript but not in jquery-ui

by pvermees

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<select id="a">
<option id="1a">1</option>
<option id="2a">2</option>
<option id="3a">3</option>
</select>

<select id="b">
<option id="1b">1</option>
<option id="2b">2</option>
<option id="3b">3</option>
</select>

<p></p>

<button id="show">show 2nd option</button>
<button id="hide">hide 2nd option</button>

JavaScript

$("#a").selectmenu();

$("#show").button().on("click",function(){
	$("#2a").show();
	$("#2b").show();
});

$("#hide").button().on("click",function(){
	$("#2a").hide();
	$("#2b").hide();
});