Ich habe zwei Dropdown-Menüs. Die Option der zweiten Dropdown-Liste wird bei der Auswahl der ersten Dropdown-Liste angezeigt.Option Anzeige funktioniert nicht in Safari
Es funktioniert perfekt auf Chrom jedoch auf Safari/iphone, es funktioniert nicht. Ich suchte im Internet, um eine Lösung zu finden und erfuhr von Safari, dass Sie die Optionen nicht ausblenden können. Also habe ich versucht, eine Lösung zu finden, die etwas, aber nicht ganz funktioniert. Wie kann ich den Code korrigieren, um dies in allen Browsern zu korrigieren?
// 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 the 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 is not corresponds to the first option
.not('[data-val="' + this.value + '"],[data-val=""]')
// hide them
.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
Ich habe eine andere Funktion von Minen auch nicht funktioniert in Safari bemerkt -
$("#search-tabs").on('click','li', function(e) {
$('.searchbox').hide().eq($(this).index()).show();
});
Also ich denke, es ist sicher zu sagen " .hide "und" .show "arbeiten nicht in Safari, was ist eine einfache Alternative, ohne einen Haufen neu schreiben zu müssen von Code?
UPDATE 2
Dies funktioniert für .Hide bis (.show = 'Block'), aber nicht für die Auswahl von Optionen -
.css('display', 'none');
UPDATE 3
Der Rückgang downs vor gemacht -
<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>";
?>
Duplizieren von https: // Stackoverflow. com/questions/4398966/how-can-i-hide-select-optionen-mit-javascript-cross-browser – Kaiido