// this is the function which, down in the HTML, we say should fire onchange on the select box

jQuery(document).ready(function() {

  if (document.getElementById("int-size-help")) document.getElementById("int-size-help").onchange = function() {

      showSelectedDiv();

  }

});



function showSelectedDiv() {

    // here we get a reference to the select box

    var Select = document.getElementById("int-size-help");



    // this next line tells which of the options has been selected, but it doesn't

    // give us the value of the selected option. It only gives us a number that refers

    // to the selected option. The first option is 0, the next one is 1, the next is 2, etc.

    // If you pick Rosa Luxemburg, then Option would be the number 3.

    var Option = Select.selectedIndex;



    // this next line is where we get the value of the option that was selected. 

    var VisibleOption = Select.options[Option].value;



    // we need to make sure that whatever div is currently visible becomes invisible. There

    // are more elegant ways to do this, but the simplest is to set all 3 divs to display=none

    document.getElementById("int-babies").style.display = "none";

	document.getElementById("int-toddlers").style.display = "none";

	document.getElementById("int-childs").style.display = "none";

	document.getElementById("int-girls").style.display = "none";

	document.getElementById("int-junior").style.display = "none";

	document.getElementById("int-junior-plus").style.display = "none";

	document.getElementById("int-misses").style.display = "none";

	document.getElementById("int-women").style.display = "none";

	document.getElementById("int-unisex").style.display = "none";

	document.getElementById("int-boys-teen").style.display = "none";

	document.getElementById("int-mens").style.display = "none";



    // now we make visible whichever div was selected

    document.getElementById(VisibleOption).style.display = "block";

  }

  

jQuery(document).ready(function() {

  if (document.getElementById("size-help")) document.getElementById("size-help").onchange = function() {

      showSelectedSizeDiv();

  }

});



function showSelectedSizeDiv() {

    // here we get a reference to the select box

    var Select = document.getElementById("size-help");



    // this next line tells which of the options has been selected, but it doesn't

    // give us the value of the selected option. It only gives us a number that refers

    // to the selected option. The first option is 0, the next one is 1, the next is 2, etc.

    // If you pick Rosa Luxemburg, then Option would be the number 3.

    var Option = Select.selectedIndex;



    // this next line is where we get the value of the option that was selected. 

    var VisibleOption = Select.options[Option].value;



    // we need to make sure that whatever div is currently visible becomes invisible. There

    // are more elegant ways to do this, but the simplest is to set all 3 divs to display=none

    document.getElementById("babies").style.display = "none";

	document.getElementById("toddlers").style.display = "none";

	document.getElementById("childs").style.display = "none";

	document.getElementById("girls").style.display = "none";

	document.getElementById("junior").style.display = "none";

	document.getElementById("junior-plus").style.display = "none";

	document.getElementById("misses").style.display = "none";

	document.getElementById("women").style.display = "none";

	document.getElementById("unisex").style.display = "none";

	document.getElementById("boys-teen").style.display = "none";

	document.getElementById("mens").style.display = "none";



    // now we make visible whichever div was selected

    document.getElementById(VisibleOption).style.display = "block";

  }