OnChange Hide and Show Drop down

Hi Guys
can anyone help with this Script ,when i load the page it shows my 2 drop downs, the one has the options and the second only populates from database when 1st options are selected.
This is working fine, But i need to hide the second drop down and only show it when the 1st are selected other wise it looks silly having a empty drop down on my page until i select something.
I use a Onchange() and it gets populated by a PHP query on a separate file

I am very new to Jquery , Jscript, any guidance appreciated.
Please let me know if i need to clarify

function change_type()
    {
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","ajaxnewlay.php?catdd="+document.getElementById("catdd").value,false);
        xmlhttp.send(null);
        document.getElementById("stype").innerHTML=xmlhttp.responseText;
        
    }
<select class="pure-u-23-24" required="required" id ="catdd"  name="types" onChange="change_type()">
<option disabled="" selected="" value=""></option>

To use synchronal XHR request possible, but not optimal.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.