选项显示在safari中不起作用

问题描述

我有两个下拉菜单。第二个下拉菜单的选项显示在第一个下拉列表中。

它在Safari浏览器/ iphone上非常完美，但它不起作用。我在网上搜索了一下，找到了一个修补程序，并了解了safari不会让你隐藏选项。所以我试图提出一个解决方案，这似乎有点但不完全。我该如何修正调整代码以在所有浏览器中纠正这种情况？

/ /获取第一个下拉列表并绑定变化事件处理函数$（'＃p-city'）。change（function（）{//获取第二个下拉列表的变量并将其缓存var $ options = $（'＃p-nhb'）//如果需要更新下拉值.val（''）//获得选项.find（'option'）//显示所有最初的.show（）; // IF SAFARI if（navigator.userAgent.indexOf（'Safari' ）（='&& navigator.userAgent.indexOf（'Chrome'）== -1）{var $ options = $（'＃p-nhb'）.val（''）。find（'option' ）.append（）;} //检查当前值是否为0 if（this.value！='0'）$ options //过滤出与第一个选项不相对应的选项.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_cityid =p-city> < option class =buttonvalue =new-york-cityselected>纽约市< / option> < option class =buttonvalue =>全部< / option> < option class =buttonvalue =dallas-tx> Dallas，TX< / option> < option class =buttonvalue =las-vegas> Las Vegas，NV< / option> < option class =buttonvalue =los-angeles>洛杉矶，CA< / option> < option class =buttonvalue =miami> Miami，FL< / option> < option class =buttonvalue =new-york-city>纽约市，纽约< / option> < option class =buttonvalue =san-francisco>旧金山，CA< / option> < option class =buttonvalue =seattle-wa> Seattle，WA< / option>< / select>< / p>< p>< select name =property_nhb [ p-nhb多个> < option class =button>全部< / option> < option data-val =los-angelesvalue =beverly-hills> Beverly Hills< / option> < option data-val =los-angelesvalue =santa-monica> Santa Monica< / option> < option data-val =miamivalue =hialea> Hialea< / option> < option data-val =miamivalue =little-havana> Little Havana< / option> < option data-val =miamivalue =north-miami>北迈阿密< / option> < option data-val =miamivalue =south-beach> South Beach< / option> < option data-val =new-york-cityvalue =chelsea> Chelsea< / option> < option data-val =new-york-cityvalue =harlem> Harlem< / option> < option data-val =new-york-cityvalue =noho> NoHo< / option> < / option>< / p>  

< option data-val =new-york-cityvalue =soho> SoHo< / option>< 另一个地雷功能也不能在safari中工作 -

$（b'b

  $（＃search-tabs）。 ，'li'，function（e）{
 $（'。searchbox'）。hide（）。eq（$（this）.index（））show（）; 
}）; 
  

所以我想可以安全地说.hide和.show不在safari中工作，什么是简单的替代方案，而不必重写一堆代码？

更新2

这适用于.hide（.show ='block'）但不适用于选择选项 -

  .css （'display'，'none'）; 
  

更新3

 < select name =property_cityclass =form-controlid = 对城市 > 
<？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'>纽约市< / option>; 
 echo< option class ='button'value =''>全部< / option>; 
 foreach（$ terms为$ term）{
 echo< option class ='button'value ='。 $ term-> slug。 >中。 $ term->名称。 < /选项> 中; 
} 
} 
？> 
< / select> 
 
< label>邻居< / 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'>全部< / option>; 
 foreach（$ parent_terms as $ pterm）{
 //获取子项
 $ terms = get_terms（$ taxonomyName，array（'parent'=> $ pterm-> term_id， 'orderby'=>'slug'，'hide_empty'=> false））; 
 foreach（$ terms为$ term）{
 echo< option data-val ='。 $ pterm-> slug。 'value ='。 $ term-> slug。 >中。 $ term->名称。 < /选项> 中; 
} 
} 
 echo< / select>; 
？> 
  

解决方案

所有浏览器都可以使用的解决方法缓存的选项列表，用于追加到第二个选择框中。

var select_clone = $（'＃p-nhb option'）; $（'＃p-city'）.change（function（）{$（'＃p-nhb'）。html（select_clone.filter（'[data-val = '+ this.value +']'））;}）.change（）;

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< p>< select name =property_cityid =p-city> < option class =buttonvalue =new-york-cityselected>纽约市< / option> < option class =buttonvalue =>全部< / option> < option class =buttonvalue =dallas-tx> Dallas，TX< / option> < option class =buttonvalue =las-vegas> Las Vegas，NV< / option> < option class =buttonvalue =los-angeles>洛杉矶，CA< / option> < option class =buttonvalue =miami> Miami，FL< / option> < option class =buttonvalue =new-york-city>纽约市，纽约< / option> < option class =buttonvalue =san-francisco>旧金山，CA< / option> < option class =buttonvalue =seattle-wa> Seattle，WA< / option>< / select>< / p>< p>< select name =property_nhb [ p-nhb多个> < option class =button>全部< / option> < option data-val =los-angelesvalue =beverly-hills> Beverly Hills< / option> < option data-val =los-angelesvalue =santa-monica> Santa Monica< / option> < option data-val =miamivalue =hialea> Hialea< / option> < option data-val =miamivalue =little-havana> Little Havana< / option> < option data-val =miamivalue =north-miami>北迈阿密< / option> < option data-val =miamivalue =south-beach> South Beach< / option> < option data-val =new-york-cityvalue =chelsea> Chelsea< / option> < option data-val =new-york-cityvalue =harlem> Harlem< / option> < option data-val =new-york-cityvalue =noho> NoHo< / option> < / option>< / p>  

< option data-val =new-york-cityvalue =soho> SoHo< / option><

$ b 这是隐藏选择的替代解决方案， $ b

var select_clone = $（'< select>）.html（$（'＃p-nhb option'））>

）.hide（）.insertAfter（'＃p-nhb'）; $（'＃p-city'）.change（function（）{$（'＃p-nhb'）。html（select_clone.find（' （）;}）.change（）;

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js> ;< / script>< p>< select name =property_cityid =p-city> < option class =buttonvalue =new-york-cityselected>纽约市< / option> < option class =buttonvalue =>全部< / option> < option class =buttonvalue =dallas-tx> Dallas，TX< / option> < option class =buttonvalue =las-vegas> Las Vegas，NV< / option> < option class =buttonvalue =los-angeles>洛杉矶，CA< / option> < option class =buttonvalue =miami> Miami，FL< / option> < option class =buttonvalue =new-york-city>纽约市，纽约< / option> < option class =buttonvalue =san-francisco>旧金山，CA< / option> < option class =buttonvalue =seattle-wa> Seattle，WA< / option>< / select>< / p>< p>< select name =property_nhb [ p-nhb多个> < option class =button>全部< / option> < option data-val =los-angelesvalue =beverly-hills> Beverly Hills< / option> < option data-val =los-angelesvalue =santa-monica> Santa Monica< / option> < option data-val =miamivalue =hialea> Hialea< / option> < option data-val =miamivalue =little-havana> Little Havana< / option> < option data-val =miamivalue =north-miami>北迈阿密< / option> < option data-val =miamivalue =south-beach> South Beach< / option> < option data-val =new-york-cityvalue =chelsea> Chelsea< / option> < option data-val =new-york-cityvalue =harlem> Harlem< / option> < option data-val =new-york-cityvalue =noho> NoHo< / option> < / option>< / p>  

< option data-val =new-york-cityvalue =soho> SoHo< / option><

I have two drop down menus. Option of second drop down are shown on the selection of first drop down.

It works perfect on chrome however on safari/iphone, it doesn't work. I searched around the web to find a fix and learned about safari doesn't let you hide the options. So I tried coming up with a solution, which seems to work somewhat but not quite. How can I fix adjust the code to correct this 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 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

I've noticed another function of mines also doesnt work in safari --

$("#search-tabs").on('click','li', function(e) {
  $('.searchbox').hide().eq($(this).index()).show();
});

So I guess it's safe to say ".hide" and ".show" dont work in safari, what is a simple alternative without having to rewrite a bunch of code?

UPDATE 2

This works to for .hide (.show = 'block') but not for the select options -

  .css('display', 'none');

UPDATE 3

The drop downs before rendered --

<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>";
?>

解决方案

Workaround that will surely works across all browsers, could be cached options list, used then to append into second select box.

var select_clone = $('#p-nhb option');


$('#p-city')
  .change(function() {
    $('#p-nhb').html(select_clone.filter('[data-val="' + this.value + '"]'));
  })
  .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>

Here is alternative solution with hidden select, due to Your comment about duplicated list bug:

var select_clone = $('<select>')
  .html($('#p-nhb option'))
  .hide()
  .insertAfter('#p-nhb');

$('#p-city')
  .change(function() {
    $('#p-nhb').html(select_clone.find('[data-val="' + this.value + '"]').clone());
  })
  .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>

这篇关于选项显示在safari中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！