CODEWITHSUNDEEP
javascriptjquery-select2
Houy Narun
Houy Narun

Reputation: 1725

How to get class .select2-search of select2 from select element ID?

Given the id of individual select element I interact with, I tried to traverse all way down to get class .select2-search of select2 to use it in my function but has no luck.

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>

There is no error in console but I could not get the class .select2-search. I tried query above in console show like this

enter image description here

The html structure after select element is converted to select2 is look like below:

enter image description here

That's mean I have select element ID, #Salutation, from here I wish to get class .select2-search.

What's wrong with it, how can I get class .select2-search from the given select ID? Thanks.

Upvotes: 1

Views: 2471

Answers (1)

Ahmed Farahat
Ahmed Farahat

Reputation: 2443

Select2 has an option called dropdownCssClass if you specify a unique value here for each select the parent div of the rendered html of select2 will have this css class and so you can access it and find elements inside easily, i would change the code to be like this

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

note that i added a data attribute for each select, then in your intialization code you can do this

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

now each of the rendered selects will have a parent with the specified class now you can select it a find inside it for example

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

Upvotes: 2

Related Questions