使用bootstrap尝试使用选择选项菜单切换div

Question

我正在尝试使用bootstrap的数据切换与选择选项菜单组合，但我无法让它工作

这是我的菜单

<select name="sort" class="col-sm-4 control-label">
                        <option value="">---</option>
                        <option  selected='selected' value="uniform"  data-toggle="#uniOptions">Uniform</option>
                        <option  value="eigen"  data-toggle="#customOptions" >Custom</option>
                    </select>

和html

 <div id="uniOptions" style="display: none;">
......
</div>
 <div id="customOptions" style="display: none;">
......
</div>

这里是javascript的一部分

.find('option[data-toggle]')
        .on('click', function() {
            var $target = $($(this).attr('data-toggle'));
            // Show or hide the additional fields
            // They will or will not be validated based on their visibilities
            $target.toggle();
            if (!$target.is(':visible')) {
                // Enable the submit buttons in case additional fields are not valid
                $('#togglingForm').data('bootstrapValidator').disableSubmitButtons(false);
            }
        });

但是[数据切换]选项不起作用

也试过

.find('option[data-toggle]')
            .on('change', function() {

任何提示，建议？