The problem is simply that you can't hide individual option
tags in most browsers. Instead, you can disable them:
o.prop('disabled',true); // or false
or .detach()
the unwanted options and re-attach them later:
window.all_options = $("[name='breed'] > option").detach(); // global variable
$("[name='pet_type']").change(function () {
var pet_type = $(this).val();
$("[name='breed']").removeAttr("disabled").append(window.all_options);
$("select[name='breed'] > option").each(function () {
var o = $(this);
if (o.data('pet-type') !== pet_type) {
o.detach();
}
});
});