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

时间:2016-10-02 11:37:23

标签: javascript html select field

  • 以下是我正在使用的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>  

- 

1 个答案:

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