Question

我有两个下拉菜单。选择第一个下拉列表时会显示第二个下拉选项。

它在chrome上工作得很完美但是在safari / iphone上，它不起作用。我在网上搜索了一个修复程序并了解了safari并不能让你隐藏这些选项。所以我尝试提出一个解决方案，这似乎有点但不完全有效。如何修复调整代码以在所有浏览器中更正此问题？

＆＃13;

// 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');

＆＃13;

<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>

＆＃13;

更新

我注意到地雷的另一个功能在徒步旅行中也不起作用 -

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

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

更新2

这适用于.hide（.show =＆＃39; block＆＃39;）但不适用于选择选项 -

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

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

Answer 1

我会使用一些内容来更新后备隐藏选择的值并根据值填充它们。因为这将是一个简单的跨浏览器解决方案

<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>
</select>
<select name="property_nhb[]" id="p-nhb-back" style="display:none" 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>

然后是一个简单的javascript

// 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
    .remove();


    $("#p-nhb").append($('#p-nhb-back option[data-val="' + this.value + '"],[data-val=""]'));
})
$('#p-city').trigger('change');

对我来说很好。这是一个相同的jsfiddle

https://jsfiddle.net/cckhgw5g/

Answer 2

肯定适用于所有浏览器的解决方法可以是缓存选项列表，然后用于附加到第二个选择框。

＆＃13;

var select_clone = $('#p-nhb option');


$('#p-city')
  .change(function() {
    $('#p-nhb').html(select_clone.filter('[data-val="' + this.value + '"]'));
  })
  .change();

＆＃13;

<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>

＆＃13;

由于您对重复列表错误的评论，以下是隐藏选择的替代解决方案：

＆＃13;

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();

＆＃13;

<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>

＆＃13;

选项显示在Safari中不起作用

2 个答案: