// Add checkout custom select fields
add_action( 'woocommerce_before_order_notes', 'add_checkout_custom_fields', 20, 1 );
function add_checkout_custom_fields( $checkout) {
$domain = 'woocommerce'; // The domain slug

echo '<h2>'.__( 'Adres Bilgileri', $domain ).'</h2>';

// First Select field (Master)
woocommerce_form_field( 'delivery_one', array(
'type' => 'select',
'label' => __( 'İlçe Seçimi' , $domain),
'class' => array( 'form-row-wide' ),
'required' => true,
'options' => array(
'' => __( 'Lütfen seçim yapınız', $domain ),
'A' => __( 'Avcılar', $domain ),
'B' => __( 'Başakşehir', $domain ),
'C' => __( 'Küçükçekmece', $domain ),
),
),
$checkout->get_value( 'delivery_one' ) );

// Default option value
$default_option2 = __( 'Site Adı', $domain );

// Dynamic select field options for Javascript/jQuery
$options_0 = array( '' => $default_option2 );
$options_a = array(
'' => $default_option2,
'Av1' => __( 'Avrupa Konutları 1. Etap', $domain ),
'Av2' => __( 'Avrupa Konutları 2. Etap', $domain ),
'Av3' => __( 'Avrupa Konutları 3. Etap', $domain ),
'Av4' => __( 'Ağaoğlu My Town Ispartakule', $domain ),
'Av5' => __( 'Patara Evleri Ispartakule', $domain ),
'Av6' => __( 'Efes Evleri Ispartakule', $domain ),
'Av7' => __( 'Olimpos Evleri Ispartakule', $domain ),
'Av8' => __( 'Garanti Koza Evleri 1', $domain ),
'Av9' => __( 'Garanti Koza Evleri 2', $domain ),
'Av10' => __( 'Bizim Evler 1', $domain ),
'Av11' => __( 'Bizim Evler 2', $domain ),
'Av12' => __( 'Bizim Evler 3', $domain ),
'Av13' => __( 'Bizim Evler 4', $domain ),
'Av14' => __( 'Bizim Evler 5', $domain ),
'Av15' => __( 'Bizim Evler 6 Metro', $domain ),
'Av16' => __( 'Bizim Evler 7', $domain ),
'Av17' => __( 'Studio 24', $domain ),
'Av18' => __( '1stanbul Evleri', $domain ),
'Av19' => __( 'Banu Evleri 3 Ispartakule', $domain ),
'Av20' => __( 'Emlak Konut Ispartakule', $domain ),
'Av21' => __( 'Emlak Konut Ispartakule 1', $domain ),
'Av22' => __( 'Emlak Konut Ispartakule 2', $domain ),
'Av23' => __( 'Kiptaş Vaditepe 1', $domain ),
'Av24' => __( 'Kiptaş Vaditepe 2', $domain ),
'Av25' => __( 'Kiptaş Vaditepe 3', $domain ),
'Av26' => __( 'Kiptaş Vaditepe 4', $domain ),
'Av25' => __( 'Nissa O2 Residence', $domain ),
);
$options_b = array(
'' => $default_option2,
'' => __( 'Başakşehir H', $domain ),
'I' => __( 'Başakşehir I', $domain ),
'J' => __( 'Başakşehir J', $domain ),
);
$options_c = array(
'' => $default_option2,
'K' => __( 'Küçükçekmece K', $domain ),
'L' => __( 'Küçükçekmece L', $domain ),
'M' => __( 'Küçükçekmece M', $domain ),
);

// Second Select field (Dynamic Slave)
woocommerce_form_field( 'delivery_two', array(
'type' => 'select',
'label' => __( 'Site Adı Seçimi', $domain ),
'class' => array( 'form-row-wide' ),
'required' => true,
'options' => $options_0,
),
$checkout->get_value( 'delivery_two' ) );

$required = esc_attr__( 'required', 'woocommerce' );

// jQuery code
?>
<script>
jQuery(function($){
var op0 = <?php echo json_encode($options_0); ?>,
opa = <?php echo json_encode($options_a); ?>,
opb = <?php echo json_encode($options_b); ?>,
opc = <?php echo json_encode($options_c); ?>,
select1 = 'select[name="delivery_one"]',
select2 = 'select[name="delivery_two"]';

// Utility function to fill dynamically the select field options
function dynamicSelectOptions( opt ){
var options = '';
$.each( opt, function( key, value ){
options += '<option value="'+key+'">'+value+'</option>';
});
$(select2).html(options);
}

// 1. When dom is loaded we add the select field option for "A" value
// => Disabled (optional) — Uncomment below to enable
// dynamicSelectOptions( opa );

// 2. On live selection event on the first dropdown
$(select1).change(function(){
if( $(this).val() == 'A' )
dynamicSelectOptions( opa );
else if( $(this).val() == 'B' )
dynamicSelectOptions( opb );
else if( $(this).val() == 'C' )
dynamicSelectOptions( opc );
else
dynamicSelectOptions( op0 ); // Reset to default
});
});
</script>
<?php
}