JSFiddle - React, Tailwind, and code Playground

HTML

<select id="DropDownList1">
     <option value="DropDownList2">Schemes1</option>
     <option value="DropDownList3">Schemes2</option>
     <option value="DropDownList4">Schemes3</option>
</select>

<p>The other 3 list are:</p>

<p>Schemes1 List</p>
<select id="DropDownList2" class="toggledDropDown">
    <option value="product1">Camera</option>
    <option value="product2">DVD</option>
    <option value="product3">AC</option>
</select>

<p>Schemes2 List</p>
<select id="DropDownList3" class="toggledDropDown">
    <option value="product4">bat</option>
    <option value="product5">ball</option>
    <option value="product6">complete kit</option>
</select>

<p>Schemes3 List</p>
<select id="DropDownList4" class="toggledDropDown">
    <option value="product7">laptop</option>
    <option value="product8">HD</option>
    <option value="product9">RAM</option>
</select>

CSS

.toggledDropDown
{
    display: none; /* Hiding the optional drop down lists */
}

JavaScript

$('#DropDownList1').change(function() {
    
    // Hide all drop downs sharing the CSS class "toggledDropDown".
    $('.toggledDropDown').hide();
    
    // Build a selector for the selected drop down
    var selector = ('#' + $(this).val());
    
    // Show the selected drop down
    $(selector).show();

});