Блог

Я создаю веб-приложение на Flask, и событие изменения jQuery хорошо работает в веб-браузере на ПК, но не работает в браузере iOS.

Вот get_new_recipe_category.js . Всякий раз, когда выбирается категория, в разделе рецептов будет отображаться только соответствующий рецепт. В настоящее время все рецепты отображаются на iOS независимо от выбора категорий.

 $(document).ready(function() {
    var select_category = $('.new-recipe-category')

    select_category.on('change', function(){

        var count = $('.new-recipe').children().length
        for (var i=0; i<count; i  ) {
            var recipe = $('.new-recipe option:eq('   i   ')');
            if (select_category.val() === recipe.attr('data-category')) {
                recipe.show();
            } else {
                if (recipe.attr('data-category') === "0") {
                    recipe.show()
                    recipe.prop('selected',true)
                } else{
                    recipe.hide()
                }
            }
        }
    });

} );

 

Вот новое _event.html

 <div class="form-row">
  <div class="form-group col-md-6">
    <label class="form-control-label" for="category_id">Category</label>
      <div class="border">
        <select class="new-recipe-category form-control form-control-lg" id="category_id" name="category_id">
          <option value="0">---</option>
          <option value="1">Chicken</option>
          <option value="2">Rice</option>
          <option value="3">Lamb</option>
        </select>
     </div>
    </div>
    <div class="form-group col-md-6">
      <label class="form-control-label" for="recipe_id">Recipe</label>
        <div class="border">
         <select class="new-recipe form-control form-control-lg" id="recipe_id" name="recipe_id">
          <option data-category="0" value="0">---</option>
          <option data-category="1" value="1" style="display: none;">Grilled Chicken</option>
          <option data-category="1" value="234" style="display: none;">Teriyaki Chicken</option>
          <option data-category="2" value="2" style="display: none;">White rice</option>
          <option data-category="3" value="3" style="display: none;">Grilled Lamb</option>
        </select>
       </div>
   </div>
</div>
 

 <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/static//js/get_new_recipe_category.js"></script>
 

Не могли бы вы дать мне какие-либо предложения?

Я обнаружил, что проблемы заключались в hide () и show (), которые не работают в мобильном браузере. Поэтому он изменился на wrap(«) и unwrap(), а затем заработал сейчас.