javascript - 基于前两个选项的 3 级选择选项

Question

问题:我想根据第一级和第二级过滤第三级选择选项。我未能在第三个选项中使用 data-service 属性，但它与第一​​级属性押韵。第二个选项已经过滤了最后一个选项。

我看过Use jQuery to change a second select list based on the first select list option答案有一个我正在处理的类似问题。

    //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

它的示例代码，您可以稍后添加所有相关数据:)

首先创建一个 js 对象，以正确的顺序指定所有行程值:

 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"],
  }
}

与更改任何第一个或第二个选择框相比，隐藏那些不在数组中的选项并显示其余选项。

$("#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()
  })

})