Question

我正在尝试更改嵌套在DIV中的下拉菜单的值。我尝试使用此jquery将默认值更改为选项之一。

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

主要问题来自错误的选择器，您需要使用点.连接类，因为它们属于同一元素，例如：

.select__select.choices__input.is-hidden

整个代码：

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();
};

更改下拉菜单的值

1 个答案: