Почему Select2 не работает на устройстве iOS?

Question

Я использую библиотеку select2 от Pixels Admin Template.Я заметил, что он хорошо работает на десктопе и устройстве Android.Тем не менее, раскрывающийся список не открывается при просмотре на устройстве iOS.Я не знал, почему это так.

$(document).ready(function() {
  var init = [];

  init.push(function() {
    var $select2 = $("#Salutation,#Gender").select2();
    $select2.on('select2:select select2:unselect', () => {
      $(":focus").blur();
    });
  })

  window.PixelAdmin.start(init);
});

body .select2-container.select2-container--default.select2-container--open {
  top: 305px!important;
  left: 22px!important;
}

.select2.select2-container.select2-container--default.select2-container--below.select2-container--open {
  top: auto!important;
}

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Select2</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="pixel-admin.min.js"></script>
<link rel="stylesheet" href="pixel-admin.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4">
      <h3>Application Form</h3>
      <form class="form" action="/action_page.php">
        <div class="form-group">
          <label for="GivenName">Given Name:</label>
          <input class="form-control" type="text" id="GivenName">
        </div>
        <div class="form-group">
          <label for="Surname">Surname:</label>
          <input class="form-control" type="text" id="Surname">
        </div>
        <div class="form-group">
          <label for="Salutation">Salutation:</label>
          <select class="form-control" name="" id="Salutation">
            <option value="Mrs">Mrs</option>
            <option value="Mr">Mr</option>
            <option value="Miss">Miss</option>
          </select>
        </div>
        <div class="form-group">
          <label for="Gender">Gender:</label>
          <select class="form-control" name="" id="Gender">
            <option value="Female">Female</option>
            <option value="Male">Male</option>
            <option value="Transgender">Transgender</option>
          </select>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</div>

Я включил js pixel-admin для вас здесь .

Примечание Работает, когда я использую функцию Запрос рабочего стола на устройстве iOS.

Есть предложения?Пожалуйста, помогите мне.Спасибо

Answer 1

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

нажмите здесь, чтобы просмотреть его ...

для второй страницы , я изменил код итеперь выпадающий список должен работать вместе с библиотеками pixel & select2, сохраняя то же представление в браузере для мобильных устройств и настольных ПК,

, вы сможете использовать их в мобильном браузере двойным щелчком мыши в каждом раскрывающемся меню, чтобы открыть его и выбрать значение, я оставил его для вас таким образом, чтобы вы могли изменить его в зависимости от события onclick; оно будет скрывать меню при выборе для настольных или мобильных браузеров.

// show/hide the menu when examples is clicked
$(".dropdown-toggle").on("click", function () {
$(".dropdown-menu").toggle();
});

// для навигации

$("#nav").on("click", "li", function () {
$("#menu-icon").click();
document.getElementById("flag").focus();
//$("#nav").slideToggle();
}); 

и для мобильных браузеров вы можете использовать нижеприведенное, чтобы скрыть меню

$ (document) .on ('click touchstart', function (){}

пожалуйста, проверьте ссылки и найдите используемые ресурсы / файлы

нажмите здесь, чтобы просмотреть его ...

остальная работа должна быть CSSи стиль кода, вы можете контролировать, как вам нравится, как естьБессмысленно настраивать поля, не глядя на них.

что касается объяснения того, как я мог решить эту задачу, на самом деле мне пришлось ограничить способ загрузки java-скриптов, кроме того, я отредактировал почти все библиотеки js и загрузил их через скрипты JS во время j-запросаотступать .

Вот шаги для достижения этой цели:

Первый:

загрузка библиотеки jquery с помощью отката

Второй:

загрузить admin-pixel.js загрузить your-pixel.css

Третий шаг:

загрузить select2.js загрузить select2.css

они должны быть загружены последовательно и, наконец, после загрузки вышеупомянутого, вы должны написать этот код, чтобы представление в раскрывающемся меню не изменялось в мобильном браузере и оно оставало те же функции, что и настольные браузеры, поместите ихв скрипте тега после загрузки J-запроса, а затем загрузки библиотеки select 2

$('select').select2({
minimumResultsForSearch: -1
});

Заключительные шаги:

Вы должны написать эти метатеги и css на вашемhtml page

<meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta id="viewport" name="viewport" content="width=device-width,initial- 
scale=1.0,user-scalable=no">

Код CSS поместите его в теги "":

html {
touch-action: manipulation;
}

В соответствии с вашим запросом задача выполнена, и вы можете просмотреть код во всех файлах, чтобы увидеть, какJS библиотеки загрузки в последовательности вы можете скачать все ресурсы вместе с HTML-страницей

по этой ссылке,

Альтернативное решение для вас - вдали от своих библиотек, вы можете создать поля раскрывающегося списка, в которых они без проблем работают в мобильном браузере, а затем использовать их встраница, у которой есть проблемы, и после выбора пользователя в этих полях рабочих выпадающих списков значение trans / tra / переместить значение в поврежденное принадлежит select2 (сделайте это с помощью java-скрипта и скройте сломанное выпадающее меню с отображением: none;

это может показаться глупым, но это гораздо быстрее, чем проходить через все эти ошибки, с которыми вы можете столкнуться во время разработки для устаревшей библиотеки, которую вы используете ....

letЯ знаю, есть ли какие-либо проблемы, с которыми вы сталкиваетесь, так как я не могу выполнить тест на вашем производственном сервере.в конечном итоге я буду редактировать свой ответ для корректировки своего ответа.

удачи

Answer 2

Не уверен, что вы пытаетесь достичь, но если вы хотите поместить ваши вызовы в массив, вы можете сделать это, как показано ниже:

var init = [];
init.push(
    $("#Salutation,#Gender").select2().on('select2:select select2:unselect', function () {
        $(":focus").blur();
    })
);

ИЛИ вы можете использовать IIFE, как показано ниже:

var init = [];
init.push(function () {
    var $select2 = $("#Salutation,#Gender").select2();
    $select2.on('select2:select select2:unselect', () => {
        $(":focus").blur();
    });
}());