我是個從來沒學習過程式的新手

以我的邏輯實在不懂下面到底有什麼差？？

我正在嚐試在一天內利用 Javascript 來控制 HTML內表單的Select元素(自學)。
我希望可以藉由A.Select選擇時，可以「選擇性」表示出不同的B.Select.Option

--成功的例子--

function gT(x)
	{
	
  var op = document.getElementById("??????").getElementsByTagName("option");
  //召入HTML的下拉式選單進入「變數OP」
  document.getElementById('test').value='';
  //重置偵錯字串
  for (var i = 0; i < op.length; i++) {
  //做迴圈跑OPTION數
	   if(op[i].selected == true)
       //如果下拉式選單，某一個被選擇
        {
			if(op[i].index > 4)//如果下拉式選單選第4個以後。
				{
					gTA();//在下面
					document.getElementById('test').value="["+op[i].selected+op[i].index+"]";//偵錯
					break;
				}         
			else
				{
					gTB();//在下面
					document.getElementById('test').value="["+op[i].selected+op[i].index+"]";//偵錯
					break;
				}
        }
	else
		{//偵錯啦？不行喔。
					document.getElementById('test').value='what?';
		}  
 }
		
	}
function gTA(x)
{
    document.getElementById('groupTypeA01').style.display = ''
	document.getElementById('groupTypeA02').style.display = ''
	document.getElementById('groupTypeA03').style.display = ''
	document.getElementById('groupTypeA04').style.display = ''
	document.getElementById('groupTypeA05').style.display = ''
	document.getElementById('groupTypeA06').style.display = ''
	document.getElementById('groupTypeB01').style.display = 'none'
	document.getElementById('groupTypeB02').style.display = 'none'
}
	function gTB(x)
{
    document.getElementById('groupTypeA01').style.display = 'none'
	document.getElementById('groupTypeA02').style.display = 'none'
	document.getElementById('groupTypeA03').style.display = 'none'
	document.getElementById('groupTypeA04').style.display = 'none'
	document.getElementById('groupTypeA05').style.display = 'none'
	document.getElementById('groupTypeA06').style.display = 'none'
	document.getElementById('groupTypeB01').style.display = ''
	document.getElementById('groupTypeB02').style.display = ''
}
</script>

但是我不瞭解的是，上面這樣可以。
那為什麼下面這樣不行？？

function gT(x)
	{
	
  var op = document.getElementById("??????").getElementsByTagName("option");
    //召入HTML的下拉式選單進入「變數OP」
  document.getElementById('test').value='';
    //重置偵錯字串
  for (var i = 0; i < op.length; i++) {
	   if((op[i].selected == true)&&(op[i].index > 4)
       //下拉式選單的情況：如果被選擇，同時超過第四個。
        {
					gTA();//在下面
					document.getElementById('test').value="["+op[i].selected+op[i].index+"]";//偵錯
					break;
				}         
			else
				{
					gTB();//在下面
					document.getElementById('test').value="["+op[i].selected+op[i].index+"]";//偵錯
					break;
 }
		
	}
function gTA(x)
{
    document.getElementById('groupTypeA01').style.display = ''
	document.getElementById('groupTypeA02').style.display = ''
	document.getElementById('groupTypeA03').style.display = ''
	document.getElementById('groupTypeA04').style.display = ''
	document.getElementById('groupTypeA05').style.display = ''
	document.getElementById('groupTypeA06').style.display = ''
	document.getElementById('groupTypeB01').style.display = 'none'
	document.getElementById('groupTypeB02').style.display = 'none'
}
	function gTB(x)
{
    document.getElementById('groupTypeA01').style.display = 'none'
	document.getElementById('groupTypeA02').style.display = 'none'
	document.getElementById('groupTypeA03').style.display = 'none'
	document.getElementById('groupTypeA04').style.display = 'none'
	document.getElementById('groupTypeA05').style.display = 'none'
	document.getElementById('groupTypeA06').style.display = 'none'
	document.getElementById('groupTypeB01').style.display = ''
	document.getElementById('groupTypeB02').style.display = ''
}
</script>

第一個利用判斷式IF巢狀迴圈來做，很成功。
但第二個是我怎麼做都失敗到很無言，才改做巢狀迴圈。
我不行利用 && || 附加多重的判斷像打電路板那樣 and or xor去控制嗎？
if((op[i].selected == true)&&(op[i].index > 4) 這樣不行？
我如果每個電路板都像Javascript這樣搞「巢狀迴圈」來做，不就累死了？

奇怪的是我利用FOR迴圈去跑option的項次.
為了偵錯，所以特別寫
document.getElementById('test').value="["document.getElementById('test').value+op[i].selected+op[i].index+"]";
出現的結果竟然是
[false1false2true3false4false5false6]

為什麼不是下面這樣？我明明是用迴圈去跑啊。
[false1][false2][true3][false4][false5][false6]

這到底是莫名奇妙什麼鬼東西。