第一个选项未显示在 select 字段中

Question

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

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

第一个选项未显示在 select 字段中

First Option not get displayed in select field

html

javascript

select

field