javascript - 第一个选项未显示在选择字段中

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/elses:

$("#long_question").toggle(this.value === "1");