Добавление двух идентичных форм select2 на одну страницу

Я пытаюсь добавить два поля select2 с несколькими значениями в свое приложение Rails.

Верхняя форма работает нормально, а нижняя не работает.

Я экспериментировал с изменением идентификаторов и добавлением нового js-кода, но безуспешно. Что-то в корне не так, что мне не хватает?

Index.html

# This one works fine
<div class="search_genre">Genre:</div>
<div class="select2-container select2-container-multi populate">
    <select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select">
       <optgroup label="Popular">
           <option value="Alt">Rock</option>
           <option value="Ind">Indie</option>
           <option value="Ind">Alternative</option>
           <option value="Ind">Acoustic</option>
       </optgroup>
      </select>
</div>


# This one doesn't show a text input or the optiongroup values
<div class="search_region">Region:</div>
<div class="select2-container select2-container-multi populate">
    <select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select">
       <optgroup label="Local">
           <option value="PDX">Greater Portland</option>
           <option value="OR">Oregon</option>
           <option value="WA">Washington</option>
       </optgroup>
      </select>
</div>

application.js

$("#e9").select2();

ruby-on-rails javascript jquery jquery-select2 ruby-on-rails-4
person Benjamin Dunphy    schedule 21.05.2014    source источник
comment
Надеюсь, это просто ошибка вырезания / вставки, но у вас одинаковое значение для трех ваших опций, этот фрагмент кода отлично работает. value="Ind" x3   -  person Dan    schedule 04.02.2020
comment
попробуйте этот stackoverflow.com/a/65194682/8919282   -  person Ghanshyam Nakiya    schedule 08.12.2020

Ответы (4)


arrow_upward
8
arrow_downward

У вас не может быть двух элементов с одинаковым id. Вместо этого используйте классы.

Оба ваших выбора имеют id="e9", вместо этого попробуйте добавить что-то вроде class="my-select" в ваш <select> элемент.

затем сделайте $('.my-select').select2();

person Ramy Nasr    schedule 21.05.2014

arrow_upward
1
arrow_downward

Для каждого select2 на той же странице вы должны определить уникальный идентификатор для тега data-select2-id.

data-select2-id="Project"

а также

data-select2-id="WBSDate"
person Sergio Cerda    schedule 04.02.2020
comment
Спасибо. мне это помогло. Я ищу это несколько дней. но для меня что-то другое, у меня был тот же идентификатор. поэтому я изменил идентификатор, и он отлично работает. - person Arman H; 14.04.2020

arrow_upward
1
arrow_downward

Как @Ramy Mention. Я надеюсь, что все работает нормально. Если это не сработает, попробуйте это. В поле выбора вы не можете использовать тот же идентификатор для примера:

       <select class="form-control select2" id="select">
           <option>Select</option> 
           <option>Cycle</option> 
           <option>Horse</option> 
        </select>
        <select class="form-control select2" id="select">
           <option>Select</option> 
           <option>Cycle</option> 
           <option>Horse</option> 
        </select>

Если у вас такой же идентификатор, окно поиска работать не будет. Просто попробуйте другое имя идентификатора, как показано ниже.

       <select class="form-control select2" id="select">
           <option>Select</option> 
           <option>Cycle</option> 
           <option>Horse</option> 
        </select>
        <select class="form-control select2" id="select1">
           <option>Select</option> 
           <option>Cycle</option> 
           <option>Horse</option> 
        </select>

Я столкнулся с такой проблемой. Вот почему я поделился здесь своим мнением. Спасибо, надеюсь, кому-то это поможет.

person Arman H    schedule 14.04.2020

arrow_upward
0
arrow_downward

Итак, это было что-то фундаментальное!

Оба идентификатора были одинаковыми. Мне это показалось странным, и это было первое, что я изменил, чтобы посмотреть, будет ли это работать. Я добавил новый код jquery в application.js с идентификатором # e10 и соответственно изменил идентификатор второй формы. Вчера это не сработало. Однако сегодня это произошло. Я, должно быть, пропустил что-то глупое, например, сохранение страницы ...

Я хочу, чтобы ТАК разрешил вам удалять ответы.

person Benjamin Dunphy    schedule 21.05.2014