Javascript 具体化多个选择-显示所选项目的数量

下午好

我使用materialize multiple select为用户选择多个值，但不是在要显示的输入中显示每个值：

“已选：5”

换句话说，我想显示用户选择的元素数量，这样用户将有一个干净的输入，但我尝试了许多方法，但我没有做到这一点

我能够获得用户检查的项目数量，但是当我尝试使用select的id或div/input的id进行设置时，我没有得到这个结果，实际上，使用select id我可以设置值，但是我想要的这一个使多重选择保持在最后选择的值，并且使用div的id不会改变任何东西

下面是我尝试过的代码

我希望有人知道一种方法来达到这个目的

小提琴：

选择你的选择
玩具
漫画
杂志
健身房
滤器
$（“#过滤器选项”）。在（'change'，function（）上{
log（$（this.val（））；
if（$（this）.val（）.length！==null）{
var numberOfElements=$（this）.val（）.length；
控制台日志（“编号：+numberOfElements）；
$（此）.val（“选定”）；
}
$（“#myInput”）.val（'Selected:2'）；
});

---

感谢您的帮助

您能在这里提供一个工作示例吗？您好@Morta1我无法使用codesandbox.io复制，但我已经使用JSFIDLE链接完成了：

<div id="myInput" class="input-field">
     <select id="filterOptions" multiple>
         <option value="" disabled>Choose your option</option>
         <option value="1">Toys</option>
         <option value="2">Comics</option>
         <option value="3">Magazines</option>
         <option value="4">Gym</option>
     </select>
     <label>Filter</label>
</div>



$("#filterOptions").on('change', function() {

        console.log($(this).val());
        if($(this).val().length !== null){
            var numberOfElements = $(this).val().length;
            console.log("Number:" + numberOfElements);

            $(this).val("Selected");
        }

         $("#myInput").val('Selected: 2');

    });