How can I create two associated dropdown lists in one block

The following is my wrong attempt to find out the problem

<script>

    function template(block) {
        var color1_ops = [
            ['green', 'GREEN'],
            ['yellow', 'YELLOW'],
            ['red', 'RED'],
        ];
        block.Extensions = ["color_pair2"];//?
        block.appendDummyInput()
            .appendField(new Blockly.FieldDropdown(color1_ops), 'COLOR1');

        Blockly.Extensions.register('color_pair2',//?
            function () {
                var input = this.inputList[0];
                var color1 = this.getField('COLOR1');
                var color2 = new Blockly.FieldDropdown(function () {
                    // Generate the drop down to match color1
                    return [[color1.getText() + ', again', color1.getValue()],
                    ['Black', 'BLACK'],
                    ['White', 'WHITE']];
                });
                input.appendField(color2);
                this.setOnChange(function () {
                    if (color2.getValue() != 'BLACK' && color2.getValue() != 'WHITE') {
                        color2.setValue(color1.getValue());
                        color2.setText(color1.getText() + ', again');
                    }
                })
            });

    }

</script>