JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<select id="options">
<option value="" selected="selected">- Please choose -</option>
<option value="1">Parent1</option>
<option value="2">-child1</option>
<option value="3">-child2</option>
<option value="4">-child3</option>
<option value="5">-child4</option>
<option value="6">Parent2</option>
<option value="7">-child5</option>
<option value="8">-child6</option>
<option value="9">-child7</option>
<option value="10">-child8</option>
</select>
JavaScript
$.extend($.expr[':'], {
startsWith: function(a, b, match) {
return $(a).text().indexOf(match[3]) === 0;
}
});
$("#options option:not(:startsWith(-))").attr('disabled', true);