最初の選択ドロップダウンに基づいて選択ドロップダウンを変更します

Question

"Category"、 "Service"、 "Worker"の3つのドロップダウンを持つ予約プラグインがあります。カテゴリが選択されると、該当するサービスとワーカーがドロップダウンリストに表示されます。これはプラグインでこの関数のコードです：カテゴリーの選択変更

   $container.on('change', '.bookly-js-select-category', function() { 
        var $chain_item = $(this).closest('.bookly-js-chain-item'), 
         location_id = $chain_item.find('.bookly-js-select-location').val(), 
         category_id = this.value, 
         service_id = $chain_item.find('.bookly-js-select-service').val(), 
         staff_id = $chain_item.find('.bookly-js-select-employee').val() 
         ; 

        // Validate selected values. 
        if (category_id) { 
         category_selected = true; 
         if (service_id) { 
          if (services[service_id].category_id != category_id) { 
           service_id = ''; 
          } 
         } 
         if (staff_id) { 
          var valid = false; 
          $.each(staff[staff_id].services, function(id) { 
           if (services[id].category_id == category_id) { 
            valid = true; 
            return false; 
           } 
          }); 
          if (!valid) { 
           staff_id = ''; 
          } 
         } 
        } else { 
         category_selected = false; 
        } 
        setSelects($chain_item, location_id, category_id, service_id, staff_id); 
       }); 

今私は、各部門が任命ボタンを持っていると私はクリックされた部門のキー値を渡すの機能を実装している部署のページを持っています予約プラグインで選択されます。

jQuery(document).ready(function(){ 
     var key="<?=$_GET['key']?>"; 
     var nkey=0; 
     setTimeout(function(){ 
jQuery('#custom_category_names').find('option').each(function(){ 
if(key == jQuery(this).text()){ 
         console.log(jQuery(this).val()); 
         nkey=jQuery(this).val(); 
        } 
}); 
        jQuery('#custom_category_names option[value="'+nkey+'"]').attr('selected',true); 
        jQuery('#custom_category_names option[value="'+nkey+'"]').trigger('click'); 
      },1000); 
    }); 

ここでは、カテゴリがドロップダウンリストに表示され、対応するサービスを表示する代わりにサービス全体が表示されます。今、私は希望これを

Answer 1

チェックこのデモを私を助け、あるいはURL

$(function(){ 
 
    $('#groups').on('change', function(){ 
 
     var val = $(this).val(); 
 
     var sub = $('#sub_groups'); 
 
     $('option', sub).filter(function(){ 
 
      if (
 
       $(this).attr('data-group') === val 
 
       || $(this).attr('data-group') === 'SHOW' 
 
      ) { 
 
       $(this).show(); 
 
      } else { 
 
       $(this).hide(); 
 
      } 
 
     }); 
 
    }); 
 
    $('#groups').trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="groups"> 
 
    <option value='America'>America</option> 
 
    <option value='Europe'>Europe</option> 
 
    <option value='Asia'>Asia</option> 
 
<select> 
 
    
 
<select id="sub_groups"> 
 
    <option data-group='SHOW' value='0'>-- Select --</option> 
 
    <option data-group='America' value='Argentina'>Argentina</option> 
 
    <option data-group='America' value='Brazil'>Brazil</option> 
 
    <option data-group='America' value='Chile'>Chile</option> 
 
    <option data-group='Europe' value='Italy'>Italy</option> 
 
    <option data-group='Europe' value='France'>France</option> 
 
    <option data-group='Europe' value='Spain'>Spain</option> 
 
    <option data-group='Asia' value='China'>China</option> 
 
    <option data-group='Asia' value='Japan'>Japan</option> 
 
<select>

を確認してください私はあなたをadded.Can微調整と一緒にプラグインの元の機能を組み合わせる必要がありますが手伝う。

Answer 2

1. 最初にすべてを隠すオプション。誰が見てあなたを助けることができますので、それらを

$('#groups').on('change', function() { 
 
    var val = $(this).val(); 
 
    var sub = $('#sub_groups'); 
 
    $("#sub_groups option").hide(); 
 
    $("#sub_groups option[data-group=" + val + "]").show(); 
 
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="groups"> 
 
    <option value='America'>America</option> 
 
    <option value='Europe'>Europe</option> 
 
    <option value='Asia'>Asia</option> 
 
<select> 
 
    
 
<select id="sub_groups"> 
 
    <option data-group='SHOW' value='0'>-- Select --</option> 
 
    <option data-group='America' value='Argentina'>Argentina</option> 
 
    <option data-group='America' value='Brazil'>Brazil</option> 
 
    <option data-group='America' value='Chile'>Chile</option> 
 
    <option data-group='Europe' value='Italy'>Italy</option> 
 
    <option data-group='Europe' value='France'>France</option> 
 
    <option data-group='Europe' value='Spain'>Spain</option> 
 
    <option data-group='Asia' value='China'>China</option> 
 
    <option data-group='Asia' value='Japan'>Japan</option> 
 
<select>