Как запустить скрипт select2 с начальным значением поиска

Question

Я использую select2. Я хотел бы при загрузке страницы установить начальный поиск / фильтр. Кто-нибудь может помочь? Это мой код:

<select name="productid" id="productid" class="search_product" autocomplete="off" style="max-width:450px" required>
                <option></option>
                ';
                while($list = $sql->fetch()) {

                    echo '
                    <option value="'.$list['id'].';'.$list['stock'].'">'.$list['item'].'</option>
                    ';
                }

                echo '
                </select>

Я хочу установить начальное значение поиска? Это не работает. Я пробовал:

 <script>
            $(function() { 
                $('input.select2-search__field').attr("val","NS/NR"); 

           });
        </script>
        ';

Answer 1

• Вы не можете установить значение в элементе <select>, потому что в отличие от <input> он принимает выбранное значение из <option>, поэтому вам нужно будет создать элемент, а затем добавить его.
• Однако хорошей идеей было бы присвоить значение первому пустому <option>, которое вы определили, и сделать его selected.
• И если значение, которое вы выбираете, исходит из database вы должны проверить условие и сделать его selected.

Я создал демонстрацию, которая работает для меня, посмотрите, работает ли она и для вас.

$(function() {
    let $html = `<option value='NS/NR' selected>NS/NR</option>`
    
    $('.search_product').select2();
    $('.search_product').append($html);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<select name="productid" id="productid" class="search_product" autocomplete="off" style="max-width:450px" required>
  <option></option>
  <option value='AAA/BBB'>AAA/BBB</option>
  <option value='CCC/DDD'>CCC/DDD</option>
  <option value='EEE/FFF'>EEE/FFF</option>
</select>