AJAX sub-menu not working in DIV tab.

[bbmak]

After I added the div tab, the AJAX sub-menu is not working anymore. I am stuck here for whole day.

<div class="tab">
	<button class="tablinks" onclick="openProgram(event, 'add_item')" id="defaultOpen">Add Item</button>
	<button class="tablinks" onclick="openProgram(event, 'list_item')">List Items</button>
</div>

<!-------------------------------------------------------------------------------------------------------------------------------->
<div id="add_item" class="tabcontent">


<div id="list_item" class="tabcontent">
...
//not working here
echo '<select name="listcategory" onchange="showsubcat(this.value)">';
foreach ($categoryRows as $categoryRow){
	echo '<option value="' . $categoryRow['id'] . '">' . $categoryRow['category_name'] . '</option>';
}
echo '</select>';
echo '<div id="subcatchooser"><b>No Subcategory</b></div>';
//not working here

<script>

function showsubcat(str) {
    if (str.length == 0) { 
        document.getElementById("subcatchooser").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("subcatchooser").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "ajax.php?action=showsubcat&parent_id=" + str, true);
        xmlhttp.send();
    }
}

</script>

[denno020]

I would hazard a guess that it's probably got something to do with the this keyword. You don't have the rest of the context for that code, so there is no way to tell what this is.

 

So this.value is likely not what you're expecting it to be