Hide and show warning messages based on option selected in various select inputs

I wish to display 3 select inputs for product variants and 3 warning messages which correspond to their respective select input. When the user selects any option other than the first 'dummy' option the warning message should disappear. I have achieved this but I believe it isn't the best way to write the JS as it is basically duplicated 3 times. Could this be looped or something?

I have googled this a lot and a lot but can never find a simple solution.

HTML:

<select id="select-1">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select id="select-2">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select id="select-3">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<div>
  <p class="option-1">Choose an option 1</p>
  <p class="option-2">Choose an option 2</p>
  <p class="option-3">Choose an option 3</p>
</div>

Here is the JS

$( window ).load(function() {

    if($('#SingleOptionSelector-0 option').length === 1) {
      $(".option-1").hide();
    }
    if($('#SingleOptionSelector-1 option').length === 1) {
      $(".option-2").hide();
    }
    if($('#SingleOptionSelector-2 option').length === 1) {
      $(".option-3").hide();
    }

  });

  $('#SingleOptionSelector-0').on('change', function () {
    if($(this).val()===""){ 
      $(".option-1").show();
    }
    else if($(this).val()!==""){ 
      $(".option-1").hide();
    }
  });
  $('#SingleOptionSelector-1').on('change', function () {
    if($(this).val()===""){ 
      $(".option-2").show();
    }
    else {
      $(".option-2").hide();
    }
  });
  $('#SingleOptionSelector-2').on('change', function () {
    if($(this).val()===""){ 
      $(".option-3").show();
    }
    else {
      $(".option-3").hide();
    }
  });

Here is a working example on codepen: https://codepen.io/anon/pen/JVJXmw

It works but I would like to only show the messages on load if the select box has more than one option, so i guess hide/show.

I would like to write the js in a better way but having no luck

Solution

In this approach we set a data attribute with a target for the warning p. Here the value can be any valid jQuery/CSS selector, which will be used to select the target message.

Then the attribute selector is used to simplify the wiring up of the event handler. Here the data attribute is used as the selector.

The event handler then uses the target data attribute from the select box to toggle the display based on the selected value.

Finally the event handlers are triggered on after they have been assigned to handle page load.

EDIT I missed the requirement to hide the warning for selects with only one option. To do this each is used to iterate the selects, the checking the number of option tags

Note I have selected a value on select 3 to demonstrate the on load functionality.

$(document).ready(function(){
  //Set up the event handler then trigger them
  //$("[id^=select-]").change(toggleWarning).trigger("change");
  //Better still lets use the data-target attribute as our selector
  $("[data-target]").on("change",toggleWarning).trigger("change");
  
  //Hide the warnings for only one child option
  $("[data-target]").each(function(){ 
    if($(this).find("option").length === 1){
      $($(this).data("target")).hide();      
    }
  });
});

function toggleWarning(){
  //Get the target warning
  var target = $($(this).data("target"));  
  //show or hide based on value  
  target.toggle($(this).val() == "");  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="select-1" data-target=".option-1">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select id="select-2" data-target=".option-2">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<select id="select-3" data-target=".option-3">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3" selected>option 3</option>
</select>

<select id="whatevs" data-target=".option-4">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>
<select id="opr" data-target=".somethingRandom">
  <option value="">Select an option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>
<select id="onlyOne" data-target=".onlyOne">
  <option value="">Only One Option</option>  
</select>

<div>
  <p class="option-1">Choose an option 1</p>
  <p class="option-2">Choose an option 2</p>
  <p class="option-3">Choose an option 3</p>
  <p class="option-4">Choose an option 4</p>
  <p class="somethingRandom">Choose an option 5</p>
  <p class="onlyOne">Only One Option</p>
</div>