I am facing an issue with the functionality of two dropdown menus. The options in the second dropdown are supposed to be shown based on the selection made in the first dropdown.
While this feature works perfectly in Chrome, it seems to be malfunctioning in Safari and on iPhones. After researching online, I discovered that Safari does not allow hiding options, which explains the problem. I attempted to come up with a solution, but it only partially resolves the issue. How can I adjust the code to make sure it works consistently across all browsers?
// get first dropdown and bind change event handler
$('#p-city').change(function() {
// get optios of second dropdown and cache it
var $options = $('#p-nhb')
// update the dropdown value if necessary
.val('')
// get options
.find('option')
// show all of them initially
.show();
// IF SAFARI
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
var $options = $('#p-nhb').val('').find('option').append();
}
// check current value is not 0
if (this.value != '0')
$options
// filter out options which don't correspond to the selected option
.not('[data-val="' + this.value + '"],[data-val=""]')
// hide those options
.hide();
// IF SAFARI
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
$options.not('[data-val="' + this.value + '"],[data-val=""]').detach();
}
})
$('#p-city').trigger('change');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<select name="property_city" id="p-city">
<option class="button" value="new-york-city" selected>New York City</option>
<option class="button" value="">All</option>
<option class="button" value="dallas-tx">Dallas, TX</option>
<option class="button" value="las-vegas">Las Vegas, NV</option>
<option class="button" value="los-angeles">Los Angeles, CA</option>
<option class="button" value="miami">Miami, FL</option>
<option class="button" value="new-york-city">New York City, NY</option>
<option class="button" value="san-francisco">San Francisco, CA</option>
<option class="button" value="seattle-wa">Seattle, WA</option>
</select>
</p>
<p>
<select name="property_nhb[]" id="p-nhb" multiple>
<option class="button">All</option>
<option data-val="los-angeles" value="beverly-hills" >Beverly Hills</option>
<option data-val="los-angeles" value="santa-monica" >Santa Monica</option>
<option data-val="miami" value="hialea" >Hialea</option>
<option data-val="miami" value="little-havana">Little Havana</option>
<option data-val="miami" value="north-miami">North Miami</option>
<option data-val="miami" value="south-beach">South Beach</option>
<option data-val="new-york-city" value="chelsea">Chelsea</option>
<option data-val="new-york-city" value="harlem">Harlem</option>
<option data-val="new-york-city" value="noho">NoHo</option>
<option data-val="new-york-city" value="soho">SoHo</option>
</select>
</p>UPDATE
I've noticed that another function of mine also doesn't work in Safari --
$("#search-tabs").on('click','li', function(e) {
$('.searchbox').hide().eq($(this).index()).show();
});
Therefore, it seems that ".hide" and ".show" do not function as expected in Safari. Is there a simple alternative without needing to rewrite a significant amount of code?
UPDATE 2
The CSS property `.css('display', 'none');` successfully replaces `.hide`, but it does not apply to the select options-
.css('display', 'none');
UPDATE 3
This snippet shows how the drop downs were rendered initially --
<select name="property_city" class="form-control" id="p-city">
<?php
$terms = get_terms( "city-type", array( 'parent' => 0, 'orderby' => 'slug', 'hide_empty' => 0 ) );
$count = count($terms);
if ( $count > 0 ){
echo "<option class='button' value='new-york-city'>New York City</option>";
echo "<option class='button' value=''>All</option>";
foreach ( $terms as $term ) {
echo "<option class='button' value='" . $term->slug . "'>" . $term->name . "</option>";
}
}
?>
</select>
<label>Neighborhood</label>
<?php $taxonomyName = "city-type";
$parent_terms = get_terms( $taxonomyName, array( 'parent' => 0, 'orderby' => 'slug', 'hide_empty' => false ) );
echo "<select name='property_nhb[]' class='form-control' id='p-nhb' style='border-left: 1px solid #000 !important;' multiple>";
echo "<option class='button'>All</option>";
foreach ( $parent_terms as $pterm ) {
//Get the Child terms
$terms = get_terms( $taxonomyName, array( 'parent' => $pterm->term_id, 'orderby' => 'slug', 'hide_empty' => false ) );
foreach ( $terms as $term ) {
echo "<option data-val='" . $pterm->slug . "' value='" . $term->slug . "'>" . $term->name . "</option>";
}
}
echo "</select>";
?>