$('#purpose').on('change', function () {
if(this.value === "1"){
$("#long_question").show();
} else {
$("#long_question").hide();
}
if(this.value === "2"){
$("#short_question").show();
} else {
$("#short_question").hide();
}
if(this.value === "3"){
$("#mcq").show();
} else {
$("#mcq").hide();
}
if(this.value === "4"){
$("#reasons").show();
} else {
$("#reasons").hide();
}
if(this.value === "5"){
$("#matching_questions").show();
} else {
$("#long_question").hide();
}
});
#long_question, #short_question, #mcq, #reasons, #matching_questions {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<select class="form-control" id='purpose' required>
<option value="">Select One</option>
<option value="1">Long Questions</option>
<option value="2">Short Questions</option>
<option value="3">MCQ</option>
<option value="4">Reasons</option>
<option value="5">Matching Questions</option>
</select>
</div>
- End of Select Field Division
- Following are the division which should be displayed on click event
<form id="long_question"> // this block is not displayed onclick
<label for="business">Welcome to Long Questions Area</label>
<input type='text' class='text' name='business' value size='20' />
</form>
<form id="short_question">
<label for="business">Welcome to Short Questions Area</label>
<input type='text' class='text' name='business' value size='20' />
</form>
<form id="mcq">
<label for="business">Welcome to MCQ Area</label>
<input type='text' class='text' name='business' value size='20' />
</form>
<form id="reasons">
<label for="business">Welcome to Reasons Area</label>
<input type='text' class='text' name='business' value size='20' />
</form>
<form id="matching_questions">
<label for="business">Welcome to Matching Questions Area</label>
<input type='text' class='text' name='business' value size='20' />
</form>
-
答案 0 :(得分:0)
在你的逻辑结束时,你有:
if(this.value === "5"){
$("#matching_questions").show();
} else {
$("#long_question").hide(); // <==== Note
}
所以即使this.value
为"1"
,最终你也会去那里再次隐藏#long_question
元素。
我认为您的意思是matching_questions
,而不是long_question
:
if(this.value === "5"){
$("#matching_questions").show();
} else {
$("#matching_questions").hide(); // <==== Note change
}
示例:
$('#purpose').on('change', function () {
if(this.value === "1"){
$("#long_question").show();
} else {
$("#long_question").hide();
}
if(this.value === "2"){
$("#short_question").show();
} else {
$("#short_question").hide();
}
if(this.value === "3"){
$("#mcq").show();
} else {
$("#mcq").hide();
}
if(this.value === "4"){
$("#reasons").show();
} else {
$("#reasons").hide();
}
if(this.value === "5"){
$("#matching_questions").show();
} else {
$("#matching_questions").hide();
}
});
#long_question, #short_question, #mcq, #reasons, #matching_questions {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<select class="form-control" id='purpose' required>
<option value="">Select One</option>
<option value="1">Long Questions</option>
<option value="2">Short Questions</option>
<option value="3">MCQ</option>
<option value="4">Reasons</option>
<option value="5">Matching Questions</option>
</select>
</div>
- End of Select Field Division
- Following are the division which should be displayed on click event
<form id="long_question"> This is the long questions div
<label for="business">Welcome to Long Questions Area</label>
<input type='text' class='text' name='business' value size='20' />
</form>
<form id="short_question">
<label for="business">Welcome to Short Questions Area</label>
<input type='text' class='text' name='business' value size='20' />
</form>
<form id="mcq">
<label for="business">Welcome to MCQ Area</label>
<input type='text' class='text' name='business' value size='20' />
</form>
<form id="reasons">
<label for="business">Welcome to Reasons Area</label>
<input type='text' class='text' name='business' value size='20' />
</form>
<form id="matching_questions">
<label for="business">Welcome to Matching Questions Area</label>
<input type='text' class='text' name='business' value size='20' />
</form>
-
附注:您可以使用toggle
而非所有if
/ else
:
$("#long_question").toggle(this.value === "1");