Question

所以我有一个工作功能，当用户选择我的选择输入上的任何选项时，将更改选择类。

这很好用，但我想要的是，如果用户再次选择第一个选项，那么该类会被更改回来。

第一个选项设置为占位符，我不能给它一个值，因为我只想在选择任何其他选项时发布信息。

我也无法将输入设置为禁用，因为我希望用户能够在之后重新选择它，因为他们不想发布该数据。

它是一个很长的检查列表，我将数据作为数组发布。

这是我目前所拥有的一个方面：

http://jsfiddle.net/SD7cd/1/

代码：

<select id="sel1" class="selectoption" name="desc[]">
    <option selected="selected">Select an option...</option>
    <option value="1">Option 1</option>
</select>

JS：

document.getElementById("sel1").onchange = function() {
if(this.value != null && this.value != undefined)
{
    this.className = "selectoption-okay";
}
};

Answer 1

我将.selectedIndex属性用于这样的值：

document.getElementById("sel1").onchange = function () {
    this.className = (this.selectedIndex != 0) ? "selectoption-okay":"selectoption";
};

<强> jsFiddle example

使用if(this.value != null && this.value != undefined)时遇到的一个问题是即使您没有明确指定它，第一个选项也会有一个值。如果没有明确给出值，则option元素的值将默认为其内容，不会为null或未定义。

每MDN：

此属性的文本内容代表标签说明选项。如果未定义，则其默认值为文本元素的内容。

Answer 2

您可以尝试这一点，当您选择Select an option...选项时，如果您尚未分配value=''，那么Select an option...将被视为值。

所以添加了

<option selected="selected" value="">Select an option...</option>
                           ^^^^^^^^

HTML：

 <select id="sel1" class="selectoption" name="desc[]">
    <option selected="selected" value="">Select an option...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
 </select>

使用Javascript：

document.getElementById("sel1").onchange = function() {
   this.className = "selectoption";    
   if(this.value != '' )
   {
    this.className = "selectoption-okay";
   }
 };

DEMO：http://jsfiddle.net/SD7cd/4/

当选择任何选项时，更改表单选择类

2 个答案: