JSFiddle - React, Tailwind, and code Playground

by jansian

HTML

<div class="col1" id="divTypeOfDwellingDropdown">:
    <select id="TypeOfDwell" name="TypeOfDwell" class="text" style="background-color:lightyellow"></select>
</div>
<input type="text" id="PrivatePropertyAnnualValue" style="display:none;" />

JavaScript

function LoadDwellingTypes() {
    var strTypeOfDwelling = '';
    var intDefault = 0;
    strTypeOfDwelling += '<option value="1" class="1">1-room HDB flat</option>';
    strTypeOfDwelling += '<option value="2" class="2">2-room HDB flat</option>';
    strTypeOfDwelling += '<option value="3" class="av">3-room HDB flat</option>';
    strTypeOfDwelling += '<option value="4">4-room HDB flat</option>';
    strTypeOfDwelling += '<option value="5">5-room HDB flat</option>';
    strTypeOfDwelling += '<option value="6">Executive HDB flat</option>';
    strTypeOfDwelling += '<option value="7" class="av">Private property</option>';
    
    $('#divTypeOfDwellingDropdown select').html(strTypeOfDwelling);
    $('#divTypeOfDwellingDropdown select').change(function () {
        LoadAnnualValueTextbox();
    });
    $('#divTypeOfDwellingDropdown select').val(intDefault);
    LoadAnnualValueTextbox();
}
function LoadAnnualValueTextbox(){
    $('#PrivatePropertyAnnualValue').hide();
        if ($('#divTypeOfDwellingDropdown select option:selected').hasClass('av')) {
            $('#PrivatePropertyAnnualValue').show();
        }
}

LoadDwellingTypes();