我在“if else”条件控件选择后显示结果。但是如果我在第二个框中更改所选项目,我想只显示一个结果。我怎么解决这个问题 ?
例如:
如果我从第一个选择框中选择第一个项目,我应该显示结果我从第二个选择框中选择第二个项目(这不是问题) 之后
如果我从第一个选择框中选择第二个项目并且从选择框中选择第二个项目
,我应该显示结果但我同时显示了第一和第二个结果。我只希望一次显示一个结果。我认为我的if条件是错误的。
function Compare(sel1, sel2) {
if (sel1 == 'A' && sel2 == '1') {
$('#first').show();
$('#first1').prop('disabled', false);
} else if (sel1 == 'A' && sel2 == '2') {
$('#second').show();
$('#second1').prop('disabled', false);
}
}
var $sel1 = $("#sel1"),
$sel2 = $("#sel2");
$("#sel1, #sel2").change(function() {
Compare($sel1.val(), $sel2.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="form-group">
<select class="form-control" id="sel1" name="sel1">
<option selected> </option>
<option value="A">A1 </option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="sel2">
<option selected> </option>
<option value="1">1 </option>
<option value="2" > 2 </option>
</select>
</div>
<div class="form-group" id="first" style="display: none;">
<input class="form-control" rows="1" name="first" id="first1" readonly value="'78'" disabled></div>
<div class="form-group" id="second" style="display: none;">
<input class="form-control" rows="1" name="second" id="second1" readonly value="'78000'" disabled></div>
答案 0 :(得分:3)
选择其他控件时隐藏其他控件:
function Compare(sel1, sel2) {
if (sel1 == 'A' && sel2 == '1') {
$('#first').show();
$('#second').hide();
$('#first1').prop('disabled', false);
} else if (sel1 == 'A' && sel2 == '2') {
$('#second').show();
$('#first').hide();
$('#second1').prop('disabled', false);
}
}
var $sel1 = $("#sel1"),
$sel2 = $("#sel2");
$("#sel1, #sel2").change(function() {
Compare($sel1.val(), $sel2.val());
});
答案 1 :(得分:0)
您重新show
元素,但永远不再hide
。您希望hide
您不再希望展示的元素,否则它们会继续显示。