Menu
I have this if-else statement which gave me weird response... whenever i select "output" first, nothing else selected afterwards can appear... FYI, I am using multi select so I can select and show as many as I want.
$('#outputText').hide();
$('#armCB').hide();
$('#outputCB').hide();
$('#zoneText').hide();
$('#counterText').hide();
$('#flagText').hide();
$('#sensorText').hide();
('#select-choice-1').change(function(){
if ($('#output').is(':selected')){
$('#outputText').show();
}
else if ($('#arm').is(':selected')){
$('#armCB').show();
}
else if ($('#zone').is(':selected')){
$('#zoneText').show();
}
else if ($('#counter').is(':selected')){
$('#counterText').show();
}
else if ($('#flag').is(':selected')){
$('#flagText').show();
}
else if ($('#sensor').is(':selected')){
$('#sensorText').show();
}
else{
$('#outputText').hide();
$('#armCB').hide();
$('#zoneText').hide();
$('#counterText').hide();
$('#flagText').hide();
$('#sensorText').hide();
}
Is there a mistake in my if-else statement? or must I use Switch case statement here? If so, how should i do it?
HTML:
<div id="display" style=" clear:both">
<div class="left" style="float:left; width:48%">
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Select Category</label>
<select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-mini="true" multiple="multiple" size="2">
<option value="arm" id="arm">Arm</option>
<option value="zone" id="zone">Zone Input</option>
<option value="output" id="output">Output</option>
<option value="counter" id="counter">Counter</option>
<option value="flag" id="flag">Flag</option>
<option value="sensor" id="sensor">Sensor</option>
</select>
</div>
</div>
<div class="right" style=" float: right; width:48%">
<div id="armCB">
<fieldset data-role="controlgroup">
<legend>Unit</legend>
<input type="checkbox" class="CB" name="armCB_1" id="armCB_1" class="custom" data-mini="true" />
<label for="armCB_1">Arming Status</label>
</fieldset>
</div>
<div id="outputText">
<p> Please enter an Output number and press "Add" button: </p>
<input style="background: white; color: black;" type="text" id="outputTextInput" value="">
<input type="submit" id="outputAdd" value="Add"/>
<input type="submit" id="outputRemove" value="Remove"/>
</div>
<div id="zoneText">
<p> Please enter a Zone number and press "Add" button: </p>
<input style="background: white; color: black;" type="text" id="zoneTextInput" value="">
<input type="submit" id="zoneAdd" value="Add"/>
<input type="submit" id="zoneRemove" value="Remove"/>
</div>
<div id="counterText">
<p> Please enter a counter number and press "Add" button: </p>
<input style="background: white; color: black;" type="text" id="counterTextInput" value="">
<input type="submit" id="counterAdd" value="Add"/>
<input type="submit" id="counterRemove" value="Remove"/>
</div>
<div id="flagText">
<p> Please enter a Flag number and press "Add" button: </p>
<input style="background: white; color: black;" type="text" id="flagTextInput" value="">
<input type="submit" id="flagAdd" value="Add"/>
<input type="submit" id="flagRemove" value="Remove"/>
</div>
<div id="sensorText">
<p> Please enter a Sensor number and press "Add" button: </p>
<input style="background: white; color: black;" type="text" id="sensorTextInput" value="">
<input type="submit" id="sensorAdd" value="Add"/>
<input type="submit" id="sensorRemove" value="Remove"/>
</div>
</div>
</div>
229
How to declare switch statements using JavaScript. Pretty handy to know it will save you lots of time when executing different code depending the value of variable. var jsLang = 'jquery'; switch (jsLang) { case 'jquery': alert('jQuery Wins! '); break; case 'prototype': alert('prototype Wins!
The switch case statement in JavaScript is also used for decision-making purposes. In some cases, using the switch case statement is seen to be more convenient than if-else statements. Consider a situation when we want to test a variable for hundred different values and based on the test we want to execute some task.
A general syntax of how switch-case is implemented in a 'C' program is as follows: switch( expression ) { case value-1: Block-1; Break; case value-2: Block-2; Break; case value-n: Block-n; Break; default: Block-1; Break; } Statement-x; The expression can be integer expression or a character expression.
The switch statement evaluates an expression, matching the expression's value against a series of case clauses, and executes statements after the first case clause with a matching value, until a break statement is encountered.
The JavaScript default case The switch case is a decision-making statement in JavaScript which is used to execute a specific block of code against an expression. This is how you can use the switch case statement in JavaScript:
There is no JQuery Switch statement. If you want to use switch statement you can refer to Javascript Switch. Here would be my approach. i will add a data-section attribute for each option in #select-choice-1, which will have the id of the corresponding div.
Sometimes you will want different switch cases to use the same code. In this example case 4 and 5 share the same code block, and 0 and 6 share another code block: If multiple cases matches a case value, the first case is selected. If no matching cases are found, the program continues to the default label.
The following flow chart explains a switch-case statement works. The objective of a switch statement is to give an expression to evaluate and several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found.
That`s just standard javascript : http://www.w3schools.com/js/js_switch.asp
switch(n) {
case 1:
//execute code block 1
break;
case 2:
//execute code block 2
break;
default:
// code to be executed if n is different from case 1 and 2
}
where switch variable will be the name of selected tag
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
