3 level select options basing on first two options

Question

Issue: I want to filter my third level select options basing on the first and second level. I have failed to use data-service attribute in the third options but it rhymes with the first level attributes. The second options already filter the last option.

I have looked at Use jQuery to change a second select list based on the first select list option and the answer has a similar issue I am dealing with.

    //set country id from name of country
    var select1 = document.querySelectorAll("#country option");
    
    for ( i=0; i<select1.length; i++ ) {
      //set the value of id from the element value
     select1[i].setAttribute("id", select1[i].value.toLowerCase() );
    }
    
    //set safari basing id name of country
    //Reference: https://jsfiddle.net/fwv18zo1/    
    var $select1 = $( '#country' ),
      $select2 = $( '#itinerary' ),
        $options = $select2.find( 'option' );
        
    $select1.on( 'change', function() {
     $select2.html( $options.filter( '[id="' + this.value.toLowerCase() + '"]' ) );
    } ).trigger( 'change' );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="pservice">
    <label class="floatLabel">Service:</label>
      <span class="wpcf7-form-control-wrap menu-705">
        <select id="services" name="menu-650" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false">
          <option id="holiday" value="holiday">Holiday</option>
          <option id="adventure" value="adventure">Adventure</option>
          <option id="safaris" value="safaris">Safaris</option>
        </select>
      </span>
    </p>
    
    <p class="dist">
    <label class="floatLabel">Country:</label>
      <span class="wpcf7-form-control-wrap menu-705">
        <select id="country" name="menu-705" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false">
          <option id="uganda" value="Uganda">Uganda</option>
          <option id="kenya" value="Kenya">Kenya</option>
          <option id="tanzania" value="Tanzania">Tanzania</option>
          <option id="rwanda" value="Rwanda">Rwanda</option>
          <option id="maldaves" value="Maldaves">Maldaves</option>
          <option id="uae" value="UAE">UAE</option>
        </select>
      </span>
    </p>
    
    <p><label class="floatLabel">Itinerary:</label>
      <span class="wpcf7-form-control-wrap menu-250">
        <select id="itinerary" name="menu-250" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required form-control" id="safari" aria-required="true" aria-invalid="false">
          <option value="3 Days Safari" id="uganda" data-service="uganda">3 Days Safari</option>
          <option value="14 days Rwenzori" id="uganda" data-service="uganda">14 days Rwenzori</option>
          <option value="5 days Dubai" id="uae" data-service="uae">5 days Dubai</option>
          <option value="6 Days Gorilla" id="rwanda" data-service="rwanda">6 Days Gorilla</option>
          <option value="8 days Sezibwa" id="uganda" data-service="uganda">8 days Sezibwa</option>
          <option value="9 days Kenya" id="kenya" data-service="kenya">9 days Kenya</option>
          
        </select>
      </span>
    </p>

Answer 1

Its en example code, you can add in all your relevant data later :)

first make an js object specifying all itinerary values in correct sequence:

 var options = {
  holiday:{
    country1:["5 days Dubai", "9 days Kenya"],
    country2:["5 days Dubai", "9 days Kenya"],
  },
  adventure: {
    country1:["5 days Dubai", "9 days Kenya"],
    country2:["5 days Dubai", "9 days Kenya"],
  }, 
  safari:{
    country1:["5 days Dubai", "9 days Kenya"],
    country2:["5 days Dubai", "9 days Kenya"],
  }
}

than on change of any first or second select box, hide those options that are not in array and show rest of them.

$("#services, #country").on('change', function(){
  var country = $("#country").val();
  var services = $("#country").val();

  var values = options[services][country];
  $("#itinerary options").each(function(){
    if(values.indexOf($(this).attr("value")) == -1)
      $(this).hide()
    else 
      $(this).show()
  })

})