jquery - 如何从 selectpicker 中的 dropdwon 获取值-它会两次提醒该值？

Question

我正在使用选择器。我有一个下拉菜单，我在选择元素时获得了值。这是成功获取值，但是当我删除 selectpicker 类时它会提醒我两次，它给了我正确的结果。这是我的代码：-

enter code here
<select class="selectpicker show-tick getCategory" data-size="12">
    <option value="">Category</option>
    <?php foreach ($allcategories as $key => $category) {?>
        <option value="{{ $category['name'] }}">{{ $category['name'] }} </option>
         <?php } ?>
</select>

这是我的 Jquery 代码：-

enter code here
var categoryvalue="";
    $('.getCategory').change(function(){
        categoryvalue = $(".getCategory option:selected").text();
        alert(categoryvalue);
    });

当我提醒 categoryvalue 它给了我正确的结果但提醒我两次。在此先感谢 :) 我正在使用 laravel 5.2

Answer 1

更新：当您引用一个类时，更改事件会触发两次。解决方案是引用 id 而不是类。

$('#test').on('changed.bs.select', function(e) {
  categoryvalue = $(".getCategory option:selected").text();
  alert(categoryvalue);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<div class="container">
  <select id="test" class="foo selectpicker show-tick getCategory" data-size="12">
    <option value="">Category</option>
        <option value="catTest1">catTest1</option>
        <option value="catTest2">catTest2</option>
        <option value="catTest3">catTest3</option>               
        <option value="catTest4">catTest4</option>
        <option value="catTest5">catTest5</option>
        <option value="catTest6">catTest6</option>
        <option value="catTest7">catTest7</option>        
</select>
</div>