Checking to see if a select input is filled in and then showing another input

As you will be able to see in the snippet, once an input is filled out, another is shown, if it has a length of more than 3 characters. The issue I am running into is getting the same concept to work for select inputs. I added the following outside of the if($.trim(this.value).length > 3) { because the value would never be over 3 characters.

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

However, I cannot get the next select box to show. I am not sure if it is not detecting what the value of the select box is and passing it through or if I am just not doing it right.

I have also tried $nextLabel.has(":select").addClass("show"); with the same, non-working results.

Any ideas what I am doing wrong?

$(".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="http://ift.tt/1qRgvOJ"></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>