As per the scenario described by you, i have prepared a small test implementation as below :-
I have one dropdown and 5 text boxes in my page as below :-
Ex :
<select id="dpdTest" onchange="DisplayTextBoxes()">
<option value="1">a</option>
<option value="2">b</option>
</select>
<input type="text" name="txtTest1" id="txtTest1" style="display:none;" />
<input type="text" name="txtTest1" id="txtTest2" style="display:none;" />
<input type="text" name="txtTest1" id="txtTest3" style="display:none;" />
<input type="text" name="txtTest2" id="txtTest4" style="display:none;" />
<input type="text" name="txtTest2" id="txtTest5" style="display:none;" />
All textboxes a re made invisible by default.
Now here is the jQuery code i have to conditionally display the textboxes :-
Ex :
$(function () {
DisplayTextBoxes();
});
function DisplayTextBoxes() {
if ($("#dpdTest option:selected").text() == 'a') {
$('input[name=txtTest1]').css("display", "block");
$('input[name=txtTest2]').css("display", "none");
}
else {
$('input[name=txtTest1]').css("display", "none");
$('input[name=txtTest2]').css("display", "block");
}
}
Here i have grouped the textboxes by giving same name attribute value.
We may use the textbox IDs to perform the display separately for each textboxes.
Hope this will definitely of use to you.