JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<script src="http://www.appelsiini.net/projects/chained/jquery.chained.min.js"></script>
<div class="col-lg-6">
    <select class="form-control" name="reportType" id="reportType">
        <option value="">----Select Report----</option>
        <option value="funds">Funds</option>
        <option value="commission">Commissions</option>
    </select>
</div>
<div class="col-lg-6">
    <select class="form-control" name="reports" id="reports" >
        
        <option class="funds" id="1" value="1">1</option>
        <option class="funds" id="2" value="2">2</option>
        <option class="funds" id="3" value="3">3</option>
    </select>
</div>

JavaScript

$(function() {
                $("#reports").chainedTo("#reportType");
            });
$('#reports').change(function () {
    reportsSelect(this);
});
            function reportsSelect(str) {
                alert(str.options[str.selectedIndex].value);

                if (str == "") {
                    document.getElementById("reportHint").innerHTML = "";
                    return;
                } else {
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    } else {
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xmlhttp.onreadystatechange = function() {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            document.getElementById("reportHint").innerHTML = xmlhttp.responseText;
                        }
                    }
                    var str = document.getElementById("reports").value;                     
                    var stl = document.getElementById("reportType").value;
                    //xmlhttp.open("GET","process/getReport.php?q="+str+"&z="+stl,true);
                    xmlhttp.open("GET","process/getReport.php?q="+str+"&z="+stl, false);
                    xmlhttp.send();
                    alert(xmlhttp.responseText);
                }
            }