Muhammad Haris Muhammad Haris - 2 months ago 8
HTML Question

First Option not get displayed in select field


  • Following is the html code that i am using.

  • these divisions should be displayed on change of select field.

  • By selecting Long Question Option we didn't get any response so please help me





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

At the end of your logic, you have:

if(this.value === "5"){
    $("#matching_questions").show();
} else {
    $("#long_question").hide();        // <==== Note
}

So even when this.value is "1", eventually you'll go there and hide the #long_question element again.

I assume you meant matching_questions, not long_question:

if(this.value === "5"){
    $("#matching_questions").show();
} else {
    $("#matching_questions").hide();        // <==== Note change
}

Example:

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

-


Side note: You can use toggle rather than all those if/elses:

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