单击重置按钮时如何将其设置为默认颜色？答案

【问题标题】：How to set it to default color when Reset button is clicked on?单击重置按钮时如何将其设置为默认颜色？
【发布时间】：2025-12-21 08:35:15
【问题描述】：

加载页面时，我将默认颜色设置为#444444。这工作正常。

同样当点击 RESET 按钮时，我需要将其设置为默认颜色#444444:

这是我的代码：

$(document).ready(function() {
$('#color').val("#444444");
    $('#colorPickerForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            color: {
                validators: {
                    hexColor: {
                        message: 'The color code is not valid'
                    }
                }
            }
        }
    });

    $('#colorPicker')
        .colorpicker()
        .on('showPicker changeColor', function(e) {
            $('#colorPickerForm').bootstrapValidator('revalidateField', 'color');
        });

        // When reset is clicked 
        $("#resetcolor").click(function(e){
        $('#color').val("#444444");
    });
});

完整的 JSFiddle：http://jsfiddle.net/vpu25k1g/44/

【问题讨论】：

希望您的重置工作正常！
不，它不工作..

标签： jquery twitter-bootstrap bootstrapvalidator

【解决方案1】：

如果您查看颜色选择器库的文档，您会看到此选项：

.colorpicker('setValue', value)
为颜色选择器设置一个新值（同时更新所有内容）。触发“changeColor”事件。

因此，您可以使用该方法设置单击休息按钮时的颜色：

$("#resetcolor").click(function(e) {
  $('#color').val("#444444");
  $('#colorPicker').colorpicker('setValue', '#444444');
});

Updated Fiddle

【讨论】：

没问题，很高兴为您提供帮助
@RoryMcCrossan 您的解决方案有效，谢谢。但是我得到Uncaught TypeError: $(...).colorpicker is not a function。知道为什么我会收到此错误吗？另外，我似乎找不到这个函数的 jquery 文档。
您需要在页面中包含颜色选择器库 - 这不是标准方法。

【解决方案2】：

修改颜色后触发change事件即可。

$("#resetcolor").click(function(e) {
    $('#color').val("#444444").trigger('change');
});

小提琴：http://jsfiddle.net/vpu25k1g/50/

【讨论】：