第一个选项不会显示在选择字段中

Question

• 以下是我正在使用的html代码。
• 这些分区应该在选择字段的更改时显示。
• 通过选择长问题选项我们没有得到任何回复所以请帮助我

$('#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>  

- 

Answer 1

在你的逻辑结束时，你有：

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");