2017-10-04 105 views
0

jquery不能在iphone上使用safari移动设备

嗨,我正在开发一个dropdwon菜单。所有的jQuery项目都不适用于iphone浏览器。在所有其他设备上都没有问题。jquery .on不能在iphone上工作(只)

我正在学习如何用Js和Jquery做事情,所以我迷失了方向。

在此先感谢。

HTML

<div class="seleccionar"> 
     <form action="php/send_email.php" method="post"> 
      <select class="marca" id="marca"> 
      <option value="SHOW"> Selecciona el vehículo que buscas</option> 
      <option value="brilliance">Brilliance</option> 
      <option value="chevrolet">Chevrolet</option> 
      <option value="dodge">Dodge</option> 
      <option value="ford">Ford</option> 
      <option value="hyundai">Hyundai</option> 
      <option value="jeep">Jeep</option> 
      <option value="kia">Kia</option> 
      <option value="nissan">Nissan</option> 
      <option value="mazda">Mazda</option> 
      <option value="suzuki">Suzuki</option> 
      <option value="toyota">Toyota</option> 
      </select> 
      <select class="modelo" id="modelo"> 
      <option data-group="SHOW" value="0">Selecciona el modelo</option> 
      <option data-group="brilliance" value="v3">v3</option> 
      <option data-group="chevrolet" value="tahoe">Tahoe</option> 
      <option data-group="dodge" value="durango">Durango</option> 
      <option data-group="ford" value="explorer">Explorer</option> 
      <option data-group="ford" value="escape">Escape</option> 
      <option data-group="ford" value="edge">Edge</option> 
      <option data-group="ford" value="ranger">Ranger</option> 
      <option data-group="hyundai" value="tucson">Tucson</option> 
      <option data-group="hyundai" value="santafe">Santa Fe</option> 
      <option data-group="hyundai" value="gi10hb">Grand i10 HB</option> 
      <option data-group="hyundai" value="gi10">Grand i10</option> 
      <option data-group="jeep" value="gcherokee">Grand Cherokee</option> 
      <option data-group="kia" value="sorento">Sorento</option> 
      <option data-group="kia" value="sportage">Sportage</option> 
      <option data-group="kia" value="rio">Rio</option> 
      <option data-group="kia" value="picante">Picanto</option> 
      <option data-group="nissan" value="qashqai">Qashqai</option> 
      <option data-group="mazda" value="cx9">CX-9</option> 
      <option data-group="mazda" value="cx5">CX-5</option> 
      <option data-group="mazda" value="cx3">CX-3</option> 
      <option data-group="mazda" value="mazda3">Mazda 3</option> 
      <option data-group="toyota" value="prado">Prado</option> 
      <option data-group="toyota" value="4runner">4 RUNNER</option> 
      <option data-group="toyota" value="rav4">RAV-4</option> 
      <option data-group="toyota" value="fortuner">Fortuner</option> 
      <option data-group="suzuki" value="vitara">Vitara</option> 
      <option data-group="suzuki" value="swift">Swift</option> 
      </select> 
      <select class="age" id="age" name="Menu"> 
      <option data-group="SHOW" value="0">Selecciona el año</option> 
      <option data-group="4runner" value="US$ 63,900">2018</option> 
      <option data-group="rav4" value="US$ 32,900">2018</option> 
      <option data-group="v3" value="US$ 19,900">2018</option> 
      <option data-group="tucson" value="US$ 29,950">2018</option> 
      <option data-group="sorento" value="US$ 38,950">2018</option> 
      <option data-group="sportage" value="US$ 29,950">2018</option> 
      <option data-group="picanto" value="US$ 14,950">2018</option> 
      <option data-group="cx9" value="US$ 59,990">2018</option> 
      <option data-group="tahoe" value="US$ 63,900">2017</option> 
      <option data-group="durango" value="US$ 62,000">2017</option> 
      <option data-group="gcherokee" value="US$ 53,000">2017</option> 
      <option data-group="mazda3" value="US$ 27,990">2017</option> 
      <option data-group="cx3" value="US$ 27,990">2017</option> 
      <option data-group="cx5" value="US$ 36,990">2017</option> 
      <option data-group="rio" value="US$ 17,950">2017</option> 
      <option data-group="edge" value="US$ 45,500">2017</option> 
      <option data-group="escape" value="US$ 29,950">2017</option> 
      <option data-group="explorer" value="US$ 48,950">2017</option> 
      <option data-group="gi10" value="US$ 14,900">2017</option> 
      <option data-group="gi10hb" value="US$ 13,900">2017</option> 
      <option data-group="santafe" value="US$ 36,900">2017</option> 
      <option data-group="prado" value="US$ 79,900">2017 </option> 
      <option data-group="qashqai" value="US$ 28,900">2017 </option> 
      <option data-group="vitara" value="US$ 22,900">2017 </option> 
      <option data-group="ranger" value="US$ 64,900">2017 </option> 
      <option data-group="swift" value="US$ 17,900">2017 </option> 
      </select> 
      <input type="text" value="0" name="price" id="price-m" readonly><a class="precalificate-m" href="#precalificate">Precalifícate</a> 
     </form> 
     </div> 

JQUERY

$(function(){ 
    $('#marca').on('change', function(){ 
     var val = $(this).val(); 
     var sub = $('#modelo'); 
     $('option', sub).filter(function(){ 
      if (
       $(this).attr('data-group') === val 
       || $(this).attr('data-group') === 'SHOW' 
      ) { 
       $(this).show(); 
      } else { 
       $(this).hide(); 
      } 
     }); 
    }); 
    $('#marca').trigger('change'); 
}); 
    $(function(){ 
    $('#modelo').on('change', function(){ 
     var val = $(this).val(); 
     var sub = $('#age'); 
     $('option', sub).filter(function(){ 
      if (
       $(this).attr('data-group') === val 
       || $(this).attr('data-group') === 'SHOW' 
      ) { 
       $(this).show(); 
      } else { 
       $(this).hide(); 
      } 
     }); 
    }); 
    $('#modelo').trigger('change'); 
}); 

$(function(){ 
    $('#age').change(function(){ 
     var price = $(this).val(); 
     $('#price-m').val(price); 
    }); 
}); 

我已经在这里张贴了这个代码: JSFiddler

+0

我只是想在运行iOS 11. iPhone 6S的小提琴和它工作得很好,选择表格所有的下拉菜单输入值发生变化 – Fanckush

+0

尝试这里transauto后.com.do/precalificate,不工作在我的iphone 7 plus,iphone 6 plus和ipad pro中,但是可以在galaxy s7,galaxy note 5和galaxy tab上正常工作。 –

+0

运行iOS 11的iPhone 6s,运行iOS 6的iPad 2.两者都可以正常工作。也许你正在使用App Store中的内容拦截应用程序 – Fanckush

回答

0

这是我做些什么来解决它。我认为这个问题是.hide()

var jsonData = { 
     "Data": [{ 
       "marca":"brilliance", 
       "modelo":"V3", 
       "age":"2018", 
       "price":"US$19,900" 
      },{ 
       "marca":"toyota", 
       "modelo":"Fortuner", 
       "age":"2017", 
       "price":"US$000" 
      }] 
     }; 

    $(function(){ 


     $('#marca').on('change', function(){ 

      var listItems = '<option selected="selected" value="0">Selecciona el modelo</option>'; 
      for (var i = 0; i < jsonData.Data.length; i++) { 

       if(jsonData.Data[i].marca == $(this).val()){ 
        listItems += "<option value='" + jsonData.Data[i].modelo + "'>" + jsonData.Data[i].modelo + "</option>"; 
       } 

      } 
      $("#modelo").html(listItems); 

     }); 




     $('#modelo').on('change', function(){ 

      var listAge = '<option selected="selected" value="0">Selecciona el año</option>'; 
      for (var i = 0; i < jsonData.Data.length; i++) { 

       if(jsonData.Data[i].modelo == $(this).val()){ 
        listAge += "<option value='" + jsonData.Data[i].price + "'>" + jsonData.Data[i].age + "</option>"; 
       } 

      } 
      $("#age").html(listAge); 

     }); 


     $('#age').on('change', function(){ 
      $('#price-m').val($(this).val()); 
     }); 

    });