The problem is that some versions of Safari will not allow hiding select options. The irrelevant options must be removed, so the way to handle that would be to initially create a clone of the filtered select element and manipulate this clone.
Code:
<script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete', function() {
// Identify some elements
var qID = '{QID}';
var thisQuestion = $('#question'+qID);
var filterQuestion = thisQuestion.prevAll('.question-container:eq(0)');
var thisAnswerItem = $('.answer-item', thisQuestion);
var filterSelect = $('select.form-control:eq(0)', filterQuestion);
// Define the included options
var includes = {
'A1': ['AO01', 'AO02', 'AO03', 'AO04', 'AO05', 'AO06', 'AO07', 'AO08', 'AO09', 'AO10', 'AO11', 'AO12', 'AO13', 'AO14', 'AO15', 'AO16', 'AO17', 'AO18', 'AO19', 'AO20', 'AO21', 'AO22'], // Bau
'A2': ['AO28', 'AO29', 'AO30', 'AO31', 'AO32', 'AO33', 'AO34', 'AO35', 'AO36', 'AO37', 'AO38', 'AO39', 'AO40', 'AO41', 'AO42', 'AO43', 'AO44', 'AO45'], // Elektro
'A3': ['AO83', 'AO84', 'AO85', 'AO86', 'AO87', 'AO88', 'AO89', 'AO90', 'AO91', 'AO92', 'AO93', 'AO94'], // Metall
'A4': ['AO95', 'AO96', 'AO97', 'AO98', 'AO99', 'AO100', 'AO101', 'AO102', 'AO103'], // Sanitär-, Heizung-, Klimatechnik
'A5': ['AO77', 'AO78', 'AO79', 'AO80', 'AO81', 'AO82'], // Holz
'A6': ['AO66', 'AO67', 'AO68', 'AO69', 'AO70', 'AO71', 'AO72', 'AO73'], // Farbe und Gestaltung
'A7': ['AO46', 'AO47', 'AO48', 'AO49', 'AO50', 'AO51', 'AO52', 'AO53', 'AO54', 'AO55', 'AO56', 'AO57', 'AO58', 'AO59', 'AO60', 'AO61', 'AO62', 'AO63', 'AO64', 'AO65'], // Fahrzeuge
'A8': ['AO74', 'AO75', 'AO76'], // Friseur und Kosmetik
'A9': ['AO23', 'AO24', 'AO25', 'AO26', 'AO27'] // Büro und Verwaltung
};
// Define the "Please choose..." text
var chooseText = "Please choose..."
// Create a clone of the filtered select
var thisSelectClone = $('select.form-control:eq(0)', thisQuestion).clone();
// A function to handle the filtered select
function handleSelect(init) {
var thisVal = '';
if(init) {
thisVal = $('select.form-control:eq(0)', thisAnswerItem).val();
}
// Remove the filtered select
$('select.form-control:eq(0)', thisAnswerItem).remove();
// Insert a new cloned select
$(thisAnswerItem).prepend(thisSelectClone.clone());
// Get the value of the previous question
var selectedValue = $(filterSelect).val();
// Identify the relevant select options
$.each(includes[selectedValue], function(i, val) {
$('select.form-control:eq(0) option[value="'+val+'"]', thisAnswerItem).addClass('relevant-item');
});
$('select.form-control:eq(0) option[value="-oth-"]', thisAnswerItem).addClass('relevant-item');
// Remove irrelevant select options
$('select.form-control:eq(0) option:not(.relevant-item)', thisAnswerItem).remove();
// Insert the "Please choose..." option
if(thisVal == '') {
$('select.form-control:eq(0)', thisAnswerItem).prepend('<option value="">'+chooseText+'</option>');
}
// Set the value of the new cloned select
$('select.form-control:eq(0)', thisAnswerItem).val(thisVal).trigger('change');
}
// Listener on the filtering select
$(filterSelect).on('change', function(e) {
handleSelect();
});
// Returning to the page
if(filterSelect.val() != '') {
handleSelect(true);
}
});
</script>
Here is your sample survey back with the middle question removed and the script above in the source of "A1":
Topic Author
Unfortunately I can't give you a link to the code I changed because it's been some time since I initially created it. Actually the final result in the survey might be a mash of multiple code pieces. I've been trying around until it worked. As I said I'm not a programmer and my ability to read code is limited.