Как получить класс .select2-search из select2 по идентификатору элемента select? - PullRequest
Новая
       10

Как получить класс .select2-search из select2 по идентификатору элемента select?

0 голосов
/ 12 октября 2018

Учитывая id отдельного элемента выбора, с которым я взаимодействую, я попытался пройти весь путь вниз, чтобы получить класс .select2-search из select2, чтобы использовать его в своей функции, но безуспешно. 

function hideSelect2Keyboard(ID) {
  var Select2Search = $('#' + ID).prev().find('.select2-drop').find('.select2-search');

  console.log(Select2Search);

  $(Select2Search + ' input, :focus,input').prop('focus', false).blur();
}

$("select").select2().on("select2-open select2-close", function() {
  var ID = $(this).attr('id');
  hideSelect2Keyboard(ID);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>


<label for="Salutation">Salutation:</label>
<select class="" name="" id="Salutation">
  <option value="Mrs">Mrs</option>
  <option value="Mr">Mr</option>
  <option value="Miss">Miss</option>
</select>

<label for="Gender">Gender:</label>
<select class="" name="" id="Gender">
  <option value="Female">Female</option>
  <option value="Male">Male</option>
  <option value="Transgender">Transgender</option>
</select>

В консоли нет ошибок, но я не смог получить класс .select2-search.Я попытался запрос выше в консоли, чтобы показать, как это

enter image description here

HTML-структура после элемента select преобразуется в select2 выглядит следующим образом:

enter image description here

Это значит, что у меня есть идентификатор элемента select, #Salutation, отсюда я хочу получить класс .select2-search.

Что с этим не так,как я могу получить класс .select2-search с заданным идентификатором выбора?Спасибо.

1 Ответ

0 голосов
/ 12 октября 2018

В Select2 есть опция с именем dropdownCssClass , если вы укажете здесь уникальное значение для каждого элемента select, родительский div от визуализированного html для select2 будет иметь этот класс css, и вы сможете легко получить к нему доступ и найти элементы внутри него., я бы изменил код так: 

<label for="Salutation">Salutation:</label>
<select class="" name="" id="Salutation" data-selector='salutation'>
 <option value="Mrs">Mrs</option>
 <option value="Mr">Mr</option>
 <option value="Miss">Miss</option>
</select>

<label for="Gender">Gender:</label>
<select class="" name="" id="Gender" data-selector='salutation'>
 <option value="Female">Female</option>
 <option value="Male">Male</option>
 <option value="Transgender">Transgender</option>
</select>

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

$("select").each(function(){
  var selector = $(this).data('selector')
  $(this).select2({
    dropdownCssClass: selector
  }).on("select2-open select2-close", function() {
    hideSelect2Keyboard(selector);
  });
});

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

var yourDiv = $('.salutation').find('.select2-search')
...