Javascript 使用jQuery在选择了选项时从选择字段中删除类

我仔细阅读了多篇StackOverflow文章，没有找到适合我所寻找内容的语法。我想我很接近了，但需要一些帮助。情况如下：

我有一个带有常规文本的表单，并根据字段是否已填写，选择不同样式的字段

我特意没有添加像select或jqueryui这样的东西来拆分select字段并用普通元素重建。努力保持事物干净和小。所有样式都是用CSS完成的

当前，我正在加载时向我的选择字段添加一个类，然后在有人与选择字段交互时删除该类：

$(".infield select").addClass('default-value');

$("select").bind("focus", function () {
$(this).removeClass('default-value');
}); 

这很好，但我的问题是，如果他们以前在网站上填写过表单，我们将使用cookie来预填充一些表单字段。上述代码仅在与字段交互时生效

我需要一些东西来删除我的“默认值”类，如果页面加载和选择字段有一些选择。这是我的最新尝试，但它不起作用

$("select option:selected").on(function() {
    $(this).parent().removeClass("default-value");
}); 

以下是基本的选择字段代码供参考：

$（“.infield select”）.addClass（'default-value'）；
$（“.infield select option:selected”）.on（函数（）{
$（this.parent（）.removeClass（“默认值”）；
});	
$（“.infield select”）.bind（“焦点”，函数（）{
$（this）.children（'option[value=“defaultValue”]'）。remove（）；
$（this.removeClass（'default-value'）；
});

表单{
背景色：#EFF2F4；
填充：5%；
}
.内场选拔赛{
字体：粗体1.1em“source sans pro”，Helvetica，Helvetica；
边界：无；
左边框：4px实心#BCC2C8；
填充：.5em；
宽度：100%；
颜色：#808080；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
边界半径：0px；
边界半径：0px！重要；
背景：url（/images/uploads/design assets/select arrow.png）右中心不重复；
背景尺寸：21px；
-webkit边界半径：0px；
-webkit外观：无；
背景色：#fff；
-webkit边界半径：0px；
-webkit外观：无；
-moz外观：无；
外观：无；
右边框：10px实心#fff；
}
.内场选择。默认值{
颜色：#99acb9；
字体大小：正常；
}

陈述
艾尔
AK

$（“.infield select option:selected”）.on（函数（）{

此语句没有任何作用。对于上的，您需要指定一个事件

.on（事件[，选择器][，数据]，处理程序）~

你不能像下面这样做吗

$(document).ready(function(){
    if($(".infield select option:selected").length > 0){
      $(".infield select").removeClass("default-value");
    }
});

---

上面的代码将检查在加载文档后是否选择了任何选项，如果至少选择了一个选项，它将删除该类。

您需要筛选所选值不等于

默认值的选项。

$(".infield select").filter(function () {
    return $(this).val() !== "";
}).removeClass("default-value");

但最好只将

默认值

类添加到那些首先选择了defaultValue选项的选项中

查看下面的演示

$（“.infield select”）.filter（函数（）{
返回$（this）.val（）=“”；
}).addClass（“默认值”）；
$（“.infield select”）.bind（“焦点”，函数（）{
$（this）.children（'option[value=“defaultValue”]'）。remove（）；
$（this.removeClass（'default-value'）；
})；

表单{
背景色：#EFF2F4；
填充：5%；
}
.内场选拔赛{
字体：粗体1.1em“source sans pro”，Helvetica，Helvetica；
边界：无；
左边框：4px实心#BCC2C8；
填充：.5em；
宽度：100%；
颜色：#808080；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
边界半径：0px；
边界半径：0px！重要；
背景：url（/images/uploads/design assets/select arrow.png）右中心不重复；
背景尺寸：21px；
-webkit边界半径：0px；
-webkit外观：无；
背景色：#fff；
-webkit边界半径：0px；
-webkit外观：无；
-moz外观：无；
外观：无；
右边框：10px实心#fff；
}
.内场选择。默认值{
颜色：#99acb9；
字体大小：正常；
}

陈述
艾尔
AK

如果有人有类似的问题，在我的情况下，问题是'，请检查以下内容：

不工作选择字段，但工作在文本框上

$('#<?echo $campo_logradouros;?>').removeClass('hidden');

$（'#'）。removeClass（'hidden'）；

它在选定的字段上工作：

$('#<?echo $campo_logradouros;?>').removeClass("hidden");

$（“#”）.removeClass（“隐藏”）；

---

我的意思是，这有多疯狂？

这更接近了，但它仍然在从选择字段中删除类，这些字段中选择了一个空值的选项（即选择列表中的第一个选项）。它需要将其保留给没有选择值的字段，这样就有了一个视觉提示，表明它们需要执行某些操作。我知道，下面的答案似乎也处理了这种情况。我不能在初始选项中有值，否则表单会将其视为已填写，如果需要，不会将错误回退。这是我的问题。我知道了st需要基于空值而不是特定值进行检查。没问题，只需使用

$（this）.val（）！==“”；

即可。宾果，就是这样。谢谢！