Changing value of drop down menu

Question

I am trying to change the value of a drop down that has select nested in DIV's. I tried using this jquery to change the default value to one of the options.

 function selectSearch() { $('select__select choices__input is-hidden option').filter(function() { return $.trim($(this).text()) == 'DEFAULT DROP OPTION'; }).attr('selected', false); $('select__select choices__input is-hidden option').filter(function() { return $.trim($(this).text()) == 'OPTION ONE'; }).attr('selected', true); $('.select__select choices__input is-hidden').change(); $('.searcher__button').click(); return $('select__select choices__input is-hidden').val() }; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="choices__inner"> <select class="select__select choices__input is-hidden" id="select-257" tabindex="-1" aria-hidden="true" data-choice="active"> <option value="" selected="">DEFAULT DROP OPTION</option> </select> <div class="choices__list choices__list--single"> <div class="choices__item choices__item--selectable" data-item="" data-id="3" data-value="" aria-selected="true"> DEFAULT DROP OPTION </div> </div> </div> <div class="choices__list choices__list--dropdown" aria-expanded="false"><input type="text" class="choices__input choices__input--cloned" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Buscar..." aria-activedescendant="choices--select-257-item-choice-1"> <div class="choices__list" dir="ltr" role="listbox"> <div class="choices__group" data-group="" data-id="949837641428" data-value="" role="group"> <div class="choices__heading"></div> </div> <div class="choices__item choices__item--choice choices__item--selectable is-highlighted" data-select-text="Press to select" data-choice="" data-id="1" data-value="" data-choice-selectable="" id="choices--select-257-item-choice-1" role="treeitem" aria-selected="true"> DEFAULT OPTION </div> <div class="choices__group" data-group="" data-id="859859147502" data-value="Destacados" role="group"> <div class="choices__heading">Destacados</div> </div> <div class="choices__item choices__item--choice choices__item--selectable" data-select-text="Press to select" data-choice="" data-id="2" data-value="7" data-choice-selectable="" id="choices--select-257-item-choice-2" role="treeitem" aria-selected="false"> OPTION ONE </div> 

Answer 1

The main problem comes from the wrong selectors, you need to join the classes using the dot . since they belong to the same element, like :

.select__select.choices__input.is-hidden

Whole code :

function selectSearch() {
  $('.select__select.choices__input.is-hidden option').filter(function() {
        return $.trim($(this).text()) == 'DEFAULT DROP OPTION';
  }).attr('selected', false);

  $('.select__select.choices__input.is-hidden option').filter(function() {
        return $.trim($(this).text()) == 'OPTIONONE';
  }).attr('selected', true);

  $('.select__select.choices__input.is-hidden').change();
  $('.searcher__button').click();

  return $('.select__select.choices__input.is-hidden').val();
};