1
두 개의 드롭 다운 메뉴가 있습니다. 두 번째 드롭 다운 옵션은 첫 번째 드롭 다운 선택시 표시됩니다.사파리에서 옵션 표시가 작동하지 않습니다.
크롬에서는 완벽하지만 Safari/iPhone에서는 작동하지만 작동하지 않습니다. 수정본을 찾기 위해 웹에서 검색을하고 사파리에 대해 알게되면 옵션을 숨길 수 없습니다. 그래서 나는 해결책을 제시하려고 노력했다. 모든 브라우저에서이 문제를 해결하도록 코드를 수정하려면 어떻게해야합니까? 그래서 나는 그것이 "말을하는 것이 안전합니다 같아요
$("#search-tabs").on('click','li', function(e) {
$('.searchbox').hide().eq($(this).index()).show();
});
-
// 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는
또한 광산 사파리에서 나던 작품의 다른 기능을 발견했습니다 .hide "및".show "는 사파리에서 작동하지 않습니다. 낱장을 다시 쓰지 않아도되는 간단한 대안은 무엇입니까? 코드?
UPDATE 2
이 선택 옵션 .hide 위해에 작동 (.show = '블록')하지만 -
.css('display', 'none');
UPDATE 3
드롭 렌더링 전의 다운 -
<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>";
?>
HTTPS의 중복 : // 유래. com/questions/4398966/javascript- 크로스 브라우저를 사용하는 방법 선택 가능 -hi- 선택 - 옵션 – Kaiido