Javascript HTML选择永久显示值？

如何使下拉选择框始终显示相同的值，而不是选定的值

例如：

<select value="Color">
<option value="blue">Blue</option>
<option value="red">Red</option>
</select>

蓝色
红色

我希望选择框在被选中时总是显示“颜色”，而不是“蓝色”或“红色”

以下是代码：

<select>
<option value="color" selected>Color</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
</select>

颜色
蓝色
红色

---

您可以将

selected

属性添加到第一个

选项中，该选项现在将是
color
，希望这有所帮助。
鉴于您能够接受JavaScript解决方案，如中所述，我可以为您提供以下解决方案，该解决方案应具有一定的可扩展性，并可根据您的需要进行定制

不过，它可以简化，这可能对任何（潜在）未来用户都有好处：

// simple function to uppercase the first letter of a given string,
// if it's a lower-case letter:
// of a given string:
function upperCaseFirst(str) {
    return str.replace(/^[a-z]/, function (firstLetter) {
        return firstLetter.toUpperCase();
    });
}

// as above, but from upper-case to lower-case:    
function lowerCaseFirst(str) {
    return str.replace(/^[A-Z]/, function (firstLetter) {
        return firstLetter.toLowerCase();
    });
}

function showOptionString(opts) {
    /* these are the defaults,
       replace: Boolean, true/false
                true - replaces the option-text with the
                       supplied prefix/suffix strings
                false - wraps the option-text with the
                        supplied prefix/suffix strings
       sentenceCaseOption: Boolean, true/false
                true - lower-cases both the first letter of
                       the option-text, and the first-letter
                       of the option's original text when
                       constructing the new text
                false - maintains both the option-text's case
                       and that of the supplied prefix-string
       separator: String,
                the string with which the option-text should be
                separated from the supplied prefix/suffix
       prefixString: String,
                the text which will precede the option-text (if
                settings.replace is set to false), or which will
                replace the option-text (by default)
       suffixString: String,
                the text which will follow the option-text (if
                settings.replace is set to false), or which will
                replace the option-text (by default)
    var settings = {
        'replace': true,
            'sentenceCaseOption': true,
            'separator': ' ',
            'prefixString': '',
            'suffixString': ''
    };

    // if the user has supplied options:
    if (opts) {
        // we iterate through the properties of the settings object and
        for (var prop in settings) {
            // if the property is of the object itself (not from
            // elsewhere in the prototype chain)
            if (settings.hasOwnProperty(prop)) {
                // overwrite the property of the settings object,
                // if that property is not undefined in the supplied
                // options object (otherwise we 'retain' the default):
                settings[prop] = opts[prop] !== undefined ? opts[prop] : settings[prop];
            }
        }
    }

    // having used Function.prototype.call when assigning the
    // the event-handler, 'this' is the <select> element:
    var select = this,
        // retrieving the <option> elements from the <select>
        options = select.options,
        // finding the selected <option>
        selected = options[select.selectedIndex],
        // we use String.prototype.trim() later to remove
        // leading/trailing white-space from the option-text;
        // here we create a regular expression to remove non white-
        // space portions of the supplied separator string.

        // removing leading white-space from the separator
        // ' : ' would become ': '
        leading = settings.separator.replace(/^\s+/, ''),
        // removing trailing white-space from the separator
        // ' : ' would become ' :'
        trailing = settings.separator.replace(/\s+$/, ''),

        // creating a single regular expression, using the 'new RegExp()'
        // constructor which will match the above strings when found
        // at the beginning (leading) or end (trailing) of the
        // option-text:
        trimReg = new RegExp('^' + leading + '|' + trailing + '$', 'g');

    // using forEach to iterate over the array-like NodeList of
    // <option> elements:
    Array.prototype.forEach.call(options, function (opt) {
        // opt is the current <option> of the NodeList over
        // which we're iterating.

        // creating a property on the Node, setting its 'oldValue' property
        // to be equal to its oldValue property or, if not yet set, to its
        // current text:
        opt.oldValue = opt.oldValue || opt.text;

        // setting the text back to its oldValue (this is to revert
        // previously-changed text back to its original form):
        opt.text = opt.oldValue;
    });

    // if settings.replace is true:
    if (settings.replace) {
        // we set the selected-option's text to a string created by
        // joining an Array of the prefixString and suffixString
        // together with the separator string:
        selected.text = [settings.prefixString, settings.suffixString].join(settings.separator);
    } else {
        // otherwise, if sentenceCaseOption is true:
        if (settings.sentenceCaseOption) {
            // do much the same, except we include the option-text's
            // lower-cased oldValue in the string we create:
            selected.text = [settings.prefixString, lowerCaseFirst(selected.oldValue), settings.suffixString].join(settings.separator);
        } else {
            // and, if we don't need/want to sentence-case the
            // option text we do exactly the same as above, but
            // without calling lowerCaseFirst() on the oldValue:
            selected.text = [settings.prefixString, selected.oldValue, settings.suffixString].join(settings.separator);
        }
    }
    // here we get the selected-option's text, trim the
    // leading/trailing white-space from it and replace any
    // remaining portions of the separator that might exist.
    // if settings.sentenceCaseOption is true,
    // we use upperCaseFirst() to upper-case the first-letter,
    // otherwise we do not:
    selected.text = settings.sentenceCaseOption ? upperCaseFirst(selected.text.trim().replace(trimReg, '')) : selected.text.trim().replace(trimReg, '');

}

// a reference to the first <select> element from the document:
var select = document.querySelector('select');

// adding a 'change' event-listener to the <select> element:
select.addEventListener('change', function () {
    // assigning the showOptionString() function as
    // the event-handler, together with Function.prototype.call
    // to pass the <select> element to the function, inside of
    // of which it will be the function's 'this':
    showOptionString.call(this, {
        // setting some of the user-supplied options:
        'prefixString': 'color',
            'suffixString': '',
            'separator': ' - '
    });
});


蓝色
红色
我希望用户能够选择值（更改所选文本的颜色），但我希望显示的值始终为“颜色”我认为如果没有JavaScript，这是不可能的。这应该通过在
之外添加
来解决，而不是试图让下拉列表成为它自己的标签。我可以使用JavaScript来实现这一点。问题是，在用户选择其他选项后，如何显示“颜色”。它不是询问如何设置默认选项。