javascript - 当选择了一个选项时，使用 jQuery 从选择字段中删除类

Question

我已经梳理了多个 StackOverflow 帖子，但没有找到适合我要查找内容的正确语法。我想我很接近，但需要一些帮助。情况是这样的:

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

我特意没有添加诸如 Chosen 或 jQuery UI 之类的东西来撕开选择字段并用普通元素重建。试图让事情保持干净和小。所有样式均使用 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(function() {
	$(this).parent().removeClass("default-value");
});	
	

$(".infield select").bind("focus", function () {
  $(this).children('option[value="defaultValue"]').remove();
  $(this).removeClass('default-value');
});	

form {
  background-color: #EFF2F4;
  padding: 5%;
  }

.infield select {
	font: bold 1.1em "source-sans-pro", Helvetica, Helvetica;
	border: none;
	border-left: 4px solid #BCC2C8;
	padding: .5em;
	width: 100%;
	color: #808080;
	-webkit-box-sizing: border-box; 
	     -moz-box-sizing: border-box; 
	          box-sizing: border-box;
	border-radius: 0px;  
	border-radius: 0px !important;
	background: url(/images/uploads/design-assets/select-arrow.png) right center no-repeat;
	background-size: 21px;
	-webkit-border-radius: 0px;
	-webkit-appearance: none;
	background-color: #fff;
	-webkit-border-radius: 0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	  appearance: none;
	border-right: 10px solid #fff;
}

.infield select.default-value {
	color: #99acb9;
	font-weight: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="infield">

<select id="billing_state" name="billing_state">
       <option value="">State</option>
       <option selected="selected" value="AL">AL</option>
       <option value="AK">AK</option>
    </select>
  
 </form>

我错过了什么？

Answer 1

您需要过滤选择值不等于 defaultValue 的选择。像这样:

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

但最好只将 default-value 类添加到那些首先选择了 defaultValue 选项的选择。

查看下面的演示。

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

$(".infield select").bind("focus", function () {
    $(this).children('option[value="defaultValue"]').remove();
    $(this).removeClass('default-value');
});

form {
    background-color: #EFF2F4;
    padding: 5%;
}
.infield select {
    font: bold 1.1em"source-sans-pro", Helvetica, Helvetica;
    border: none;
    border-left: 4px solid #BCC2C8;
    padding: .5em;
    width: 100%;
    color: #808080;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0px;
    border-radius: 0px !important;
    background: url(/images/uploads/design-assets/select-arrow.png) right center no-repeat;
    background-size: 21px;
    -webkit-border-radius: 0px;
    -webkit-appearance: none;
    background-color: #fff;
    -webkit-border-radius: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-right: 10px solid #fff;
}
.infield select.default-value {
    color: #99acb9;
    font-weight: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form action="" class="infield">
    <select id="billing_state" name="billing_state">
        <option value="">State</option>
        <option selected="selected" value="AL">AL</option>
        <option value="AK">AK</option>
    </select>
</form>