Disabling the second drop down list box

Enable the child list with JavaScript

The disabled property can be controlled directly from the parent list. This keeps presentation logic in JavaScript instead of generating JavaScript statements from PHP.

const category = document.querySelector('#category');
const subcategory = document.querySelector('#subcategory');

subcategory.disabled = true;

category.addEventListener('change', () => {
    subcategory.disabled = category.value === '';
});

If the second list is loaded from the server, keep it disabled until the new options have arrived successfully.

To enable or disable the dropdown box we will keep one function in JavaScript and inside it we will keep the command for enable or disable based on the value or presence of first drop down value. If the selection of first drop down is present then only we will enable it otherwise we will keep the second list in disable condition.

To make the second dropdown box disable when the first time the page loads we will use the page onload command.

Here is the main code in which is to be added in JavaScript part. The full JavaScript part is kept here.
DEMO of this script with disable option→

<SCRIPT language=JavaScript>
<!--
function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='dd.php?cat=' + val;
}
function disableselect()
{
<?Php
if(isset($cat) and strlen($cat) > 0){
echo "document.f1.subcat.disabled = false;";}
else{echo "document.f1.subcat.disabled = true;";}
?>
}
//-->
</script>

We will collect the value of $cat before this JavaScript code as based on this value our command inside the JavaScript will change.

MYSQLI Support

Two pages are added with MYSQLI functions.

←Drop Down List DEMO of this script with disable option→

← Subscribe to our YouTube Channel here

plus2net.com