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>
$(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,
});
<%}%>
$(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.