У меня есть инструкция if-else, которая дала мне странный ответ... всякий раз, когда я выбираю "вывод" сначала, ничто другое после этого не может появиться... FYI, я использую multi select, поэтому я могу выбрать и показать столько, сколько захочу,
$('#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();
}
Есть ли ошибка в инструкции if-else? или я должен использовать оператор case switch здесь? Если да, то как мне это сделать?
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>