I've tried the same code (and JSFiddle) in Firefox 44.0.2, Chrome 48.0.2564.109 (64-bit), and Safari 9.0.3 (on Mac OS X 10.11.3), and the only browser that has an issue with it is Safari.
Not only does $(this).hide(); not work but neither does $(this).addClass('hidden') or $(this).css("display", "none");.
Has Safari just not yet caught up?
HTML:
<select name="responses" data-signature="randomString" size="12" style="width: 260px;">
<option value="1" title="Title1" data-category="1" data-content="Content1">This is 1</option>
<option value="2" title="Title2" data-category="1" data-content="Content2">This is 2</option>
<option value="3" title="Title3" data-category="1" data-content="Content3">This is 3</option>
<option value="4" title="Title4" data-category="0" data-content="Content4">This is 4</option>
<option value="5" title="Title5" data-category="2" data-content="Content5">This is 5</option>
<option value="6" title="Title6" data-category="2" data-content="Content6">This is 6</option>
<option value="7" title="Title7" data-category="2" data-content="Content7">This is 7</option>
<option value="8" title="Title8" data-category="1" data-content="Content8">This is 8</option>
<option value="9" title="Title9" data-category="2" data-content="Content9">This is 9</option>
</select>
JS/jQuery (1.10.2):
$('select[name=responses]').children().each(function() {
console.log($(this));
$(this).hide();
});
Incase it isn't obvious, the result of the JSFiddle should be an empty <select> element as all of the children (the <option> tags) should be set to display: none;.
