时间戳

首页 > 解决方案 > 如何使用初始搜索值启动 select2 脚本

jquery - 如何使用初始搜索值启动 select2 脚本

问题描述

我正在使用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>
        ';

标签： jquery

解决方案

  • 您不能在<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>

推荐阅读