I have Select drop list with four options in ASP.Net MVC.
<div>
    <select <%=Model.CanUpdate ? "" : "disabled" %> id="VibrationMode_Manual" name="VibrationMode_Manual" class="form-select">
        <option <%: VibrationMode == "0"? "selected":"" %> value="0">Velocity</option>
        <option <%: VibrationMode == "1"? "selected":"" %> value="1">Acceleration Zero </option>
        <option <%: VibrationMode == "2"? "selected":"" %> value="2">Acceleration Two</option>
        <option <%: VibrationMode == "4"? "selected":"" %> value="4">Displacement</option>
    </select>
</div>
<div class="row sensor">
    <div class="col-12 col-md-3">
        <%: Html.TranslateTag("Sensor/ApplicationCustomization/app_111|Vibration Aware Threshold","Vibration Aware Threshold")%> (<span class="VATlabel"></span>) // VatLabel is:  mm/s^2 or mm/s or mm
    </div>
    <div class="col sensor">
        <input class="form-control" type="number" step="any" <%=Model.CanUpdate ? "" : "disabled" %> name="VibrationAwareThreshold_Manual" id="VibrationAwareThreshold_Manual" value="<%=VibrationAwareThreshold %>" />
        <a id="vatNum" style="cursor: pointer;"><%=Html.GetThemedSVG("list") %></a>
        <%: Html.ValidationMessageFor(model => model.MaximumThreshold)%>
    </div>
</div>
If I select Option 0 will display (modal 0); If I select Option 1 will display (modal 1), If I select Option 2 will display (modal 2), If I select Option 4 will display (modal 4), with ID=VatNum for display modals 0, 1, 2, 4
Velocity is 655.35  (xxx.xx)  Modal 0
Acceleration Zero is 65535    (xxxxx) Modal 1
Acceleration Two is 65535   (xxxxx)  Modal 2
Displacement is 655.35    (xxx.xx) Modal 4
See the JQuery I am using Mobiscroll for Modals
<script type="text/javascript">    
$(function () {
        var VAtMode = <%=VibrationMode%>
            setVATlabel(VAtMode);
        <% if (Model.CanUpdate)
    { %>
function setVATSettings(mode) {
        switch (mode) {
            case 0:
                label = 'mm/s';
                VatMax = 655.35;
                VATStep = .01;
                break;
            case 2:
            case 1:
                label = 'mm/s^2';
                VatMax = 65535;
                VATStep = 1000;
                break;
            case 4:
                label = 'mm';
                VatMax = 655.35;
                VATStep = .01;
                break;
        }
        $('.VATlabel').html(label);
        $('#VibrationAwareThreshold_Manual').val(VatMax);
    }
    function setVATlabel(mode) {
        switch (mode) {
            case 0:
                label = 'mm/s';
                VatMax = 655.35;
                VATStep = .01;
                break;
            case 2:
            case 1:
                label = ' mm/s^2';
                VatMax = 65535;
                VATStep = 1000;
                break;
            case 4:
                label = 'mm';
                VatMax = 655.35;
                VATStep = .01;
                break;
        }
        $('#VibrationAwareThreshold_Manual').val(VATVal);
        $('.VATlabel').html(label);
    }
</script>
//When I select “Velocity (mm/s) it will display modal 0 /
     $(function () {
               <% if (Model.CanUpdate)
        { %>
        $('#vatNum').mobiscroll4().number({
            theme: 'ios',
            display: popLocation,
            wheelOrder: 'HHii',
            minWidth: 120,
            showLabel: true,
            min: minActiveInterval,
            headerText: ‘Velocity - mm/s',
            touchUI: true,
            min: 0.00,
            max = 655.35;
            step = .01;
            
            ]
        });
        <%}%>
//When I select “Acceleration Zero (mm/s^2) it will display modal 1 /
     $(function () {
               <% if (Model.CanUpdate)
        { %>
        $('#VatNum').mobiscroll4().number({
            theme: 'ios',
            display: popLocation,
            wheelOrder: 'HHii',
            minWidth: 120,
            showLabel: true,
            min: minActiveInterval,
            headerText: ‘Acceleration Zero – mm/s^2',
            touchUI: true,
            min: 0,
            max: 65535,
            step: 10000, 
            
        });
        <%}%>
//When I select “Acceleration Two (mm/s^2) it will display modal 2 /
     $(function () {
               <% if (Model.CanUpdate)
        { %>
        $('#vatNum').mobiscroll4().number({
            theme: 'ios',
            display: popLocation,
            wheelOrder: 'HHii',
            minWidth: 120,
            showLabel: true,
            min: minActiveInterval,
            headerText: ‘Acceleration Two – mm/s^2',
            touchUI: true,
            max: 65535,
            step: 10000, 
        });
        <%}%>
//When I select “Displacement (mm) display modal 4 /
     $(function () {
               <% if (Model.CanUpdate)
        { %>
        $('#vatNum').mobiscroll4().number({
            theme: 'ios',
            display: popLocation,
            wheelOrder: 'HHii',
            minWidth: 120,
            showLabel: true,
            min: minActiveInterval,
            headerText: 'Displacement – mm',
            touchUI: true,
            max = 655.35;
            step = .01;
        });
<%}%>
Your help is highly appreciated. Thanks.