Bootstrap selectpicker onchange会多次触发

Question

我遇到的问题是bootstrap select picker上的更改事件触发了太多。

我有一个使用smarty的选择选项，如下所示：

<select class="selectpicker" id="ves">
    {foreach $ves as $vt}
        <option value="{$vt['v_id']}">{$vt['v_name']}</option>
    {/foreach}
</select>

smarty的输出如下：

<select class="selectpicker" id="ves">
    <option value="1">Hello</option>
    <option value="2">World</option>
</select>

然后我调用以下JavaScript：

$(document).ready(function(){
    $('#ves').on('change', function(){
       console.log('click');
       console.log($(this).val());
    });
});

首次选择时输出：

  

点击
  2

第二次选择时的输出：

  

点击
  1
  点击
  1

第三次选择时的输出：

  

点击
  2
  点击
  2
  点击
  2

正如你所看到的，它有点积累，我不知道为什么。有什么想法吗？