Na hora do clique, obter o mesmo resultado

Boa noite a todos. Direto ao ponto. Pessoal Abaixo temos EX1 e EX2 .

Na hora do clique, gostaria que o EX1 tivessse o mesmo resultado que o Ex2

Estou tentando colocar o código php no EX1 para que na hora do clique tenha o mesmo resultado do EX2, mas não estou conseguindo. Vejam:

Este é o EX1

<select name="primeiroSelectA" size="4" style="width:50px; height:auto;" required>

<?php
$dados = array('a', 'b', 'c' , 'd');

for($a = 0; $a <count($dados); $a++){

	$exibe = $dados[$a];
	//echo $dados[$a].'<br />';
?>

<option value="<?php echo $exibe;?>"><?php echo $exibe;?></option>
<?php
}
?>
</select>

<select name="segundoSelectA" size="4" style="width: 200px; height:auto;" disabled>

<?php
$month = strtotime(date('FY'));
$end = strtotime("+4 month",$month);
$contador=6;

while($month < $end){

$mes_e_ano = date('FY', $month);
$mesIngles = array("January","February","March","April","May","June","July","August","September","October","November","December");
$month = strtotime("+1 month", $month);
//echo $mes_e_ano;
?>

<option value="<?php echo $mes_e_ano;?>"><?php echo $mes_e_ano;?></option>
<?php }?>

</select>

<select name="tete" size="4" style="width: 200px; height:auto;" disabled>

 <?php
$dados = array('a', 'b', 'c' , 'd');

for($a = 0; $a <count($dados); $a++){ $x = "'".$dados[$a]."'".":"; //====================================

$month = strtotime(date('FY'));
$end = strtotime("+4 month",$month);
$contador=6;

while($month < $end){

$mes_e_ano = date('FY', $month);
$mesIngles = array("January","February","March","April","May","June","July","August","September","October","November","December");
$month = strtotime("+1 month", $month);
$y = $x. "'" .$mes_e_ano. "'". ",";

?>

<script>
(function(document){
 'use strict';
 var primeiroSelectA = document.querySelector('select[name="primeiroSelectA"]');
 var segundoSelectA = document.querySelector('select[name="segundoSelectA"]');

 var mapA = {
<?php echo $y;?>

<?php
 }}
?>
 };

 function selected($select, value) {
 var $options = $select.getElementsByTagName('option');

 for(var i=0; i < $options.length; i++) {
 if ($options[i].value === value) {
 return $options[i].selected = true;
 }
 }
 }

 primeiroSelectA.addEventListener('change', function(){
 var v = this.value;
 selected(segundoSelectA, mapA[this.value]);
 });

}(document));
</script>

</select>

Este é o EX2

<select name="primeiroSelect" size="4" style="width:50px; height:auto;" required>
 <option value="a">a</option>
 <option value="b">b</option>
 <option value="c">c</option>
 <option value="d">d</option>
</select>

<select name="segundoSelect" size="4" style="width: 200px; height:auto;" disabled>
 <option value="October2017">October2017</option>
 <option value="November2017">November2017</option>
 <option value="December2017">December2017</option>
 <option value="January2018">January2018</option>
</select>

<script>
(function(document){
 'use strict';
 var primeiroSelect = document.querySelector('select[name="primeiroSelect"]');
 var segundoSelect = document.querySelector('select[name="segundoSelect"]');

 var mapA = {
 'a': 'October2017',
 'b': 'November2017',
 'c': 'December2017',
 'd': 'January2018'
 };

 function selected($select, value) {
 var $options = $select.getElementsByTagName('option');

 for(var i=0; i < $options.length; i++) {
 if ($options[i].value === value) {
 return $options[i].selected = true;
 }
 }
 }

 primeiroSelect.addEventListener('change', function(){
 var v = this.value;
 selected(segundoSelect, mapA[this.value]);
 });

}(document));
</script>