检查是否填写了选择输入，然后显示另一个输入

Question

正如您将能够在代码段中看到的那样，一旦填写了输入，如果其长度超过3个字符，则会显示另一个输入。我遇到的问题是使相同的概念适用于选择输入。我在if($.trim(this.value).length > 3) {之外添加了以下内容，因为该值永远不会超过3个字符。

if($('#has-color').val()){
            $nextLabel.has(":input").addClass("show");
        } else {
            // do something else
        }

但是，我无法显示下一个选择框。我不确定它是否没有检测到选择框的值是什么并通过它，或者我是不是做得不对。

我也尝试$nextLabel.has(":select").addClass("show");使用相同的非工作结果。

任何想法我做错了什么？

$(".labelsGroup").each(function() {

    var $thatGroup = $(this);
    var $nextGroup = $thatGroup.next(".labelsGroup");
    var $inputs    = $thatGroup.find("input");
	var $selects   = $thatGroup.find("select");
    var $proceed   = $thatGroup.find("button");

    $inputs.on("input", function(){
      var $nextLabel = $(this).closest("label").next("label");
      if($.trim(this.value).length > 3) {
        $nextLabel.has(":input").addClass("show");
      }
		if($('#has-color').val()){
			$nextLabel.has(":input").addClass("show");
		} else {
			// do something else
		}
    });

    $proceed.on("click", function(e){
		$("html, body").animate({ scrollTop: 0 }, 200);
		e.preventDefault();
      
      var allValid = $inputs.filter(function() { 
        return $.trim(this.value).length > 3;
      }).length === $inputs.length;
      // TODO: use a better validation plugin than the above

      if(allValid) { // Finally proceed!!
        $thatGroup.addClass("hide");
        $nextGroup.addClass("show");
        // TODO: Submit form using AJAX to a service
      } else {       // or Log error!!
        return alert("Please fill-in the missing fields!");
      }

    });

  });

.labelsGroup {
	text-align: center;
}
.labelsGroup label {
	display: block;
	margin: 50px 0;
	font-size: 1.4em;
}
.labelsGroup label input, .labelsGroup label select {
	background: #fff;
	padding: 15px 15px;
	border: 1px solid #999;
	width: 40%;
	font-size: 1.3em !important;
}
.labelsGroup input, .labelsGroup select {
	margin-top: 20px;
}
.proceed-button {
	background: #0085A1;
	color: #FFF;
	padding: 15px 20px;
	border: none;
	font-size: 1.2em;
	margin-top: 15px;
	cursor: pointer;
	webkit-transition: .7s ease;
	transition: .7s ease;
	display: inline-block;
	width: auto;
}
.proceed-button:hover {
	background: #005b6e;
	webkit-transition: .7s ease;
	transition: .7s ease;
}	
/* hide all but first label in parent */
/* hide all subsequent labelsParents */
.labelsGroup label + label,
.labelsGroup + .labelsGroup,
.hide {
	opacity: 0;
	visibility: hidden;
	position: absolute;
}
.show {
	opacity: 1 !important;
	visibility: visible !important;
	position: relative !important;
	-webkit-transition: opacity 0.7s ease-in;
	transition: opacity 0.7s ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="labelsGroup">
			<div class="container-intro">First, let's find out a little bit about you.</div>
			<label>
			What is your name?<br>
				<input name="name" type="text"><!-- PS: use name="" instead of id=""-->
			</label>
			<label>
			Email address<br>
				<input name="email" type="email">
			</label>
			<label>
				<button class="proceed-button">PROCEED</button>
			</label>
		</div>
		<div class="labelsGroup">
			<div class="container-intro">Now let's go over existing information.</div>
			<label>
				Do you have a favorite color?<br>
				<select name="color-question" id="has-color">
					<option value="" disabled selected>Please choose option</option>
					<option value="Yes">Yes</option>
					<option value="No">No</option>
				</select>
			</label>
			<label>
				What is it?<br>
				<select name="answered-question" id="has-answered">
					<option value="" disabled selected>Please choose option</option>
					<option value="Yes">Yes</option>
					<option value="No">No</option>
				</select>
			</label>
			<label>
				<button class="proceed-button">PROCEED</button>
			</label>
		</div>

Answer 1

如果你这样做会怎么样：

$('#has-color').on("change", function(){
    var $nextLabel = $(this).closest("label").next("label");
        if($('#has-color').val()){
            $nextLabel.has(":input").addClass("show");
        } else {
            $nextLabel.has(":input").removeClass("show");
        }
    });

所有选择？