Conditional Dropdown List Javascript And Html
I'm trying to make a a webpage that has a conditional dropdown box using html and javascript. Say it's a certain day in the week like Monday I need a different dropdown box with di
Solution 1:
If i understood your requirement correctly. This is what you are looking for using jquery
$("#QuestionOptions").change(function(){
$("#A,#B").hide();
if($(this).val() == "A"){
$("#A").show();
}else{
$("#B").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<div id="myQuestions">
<select id="QuestionOptions">
<option value disalbe selected>What Day is it?</option>
<option value="A">Monday</option>
<option value="A">Tuesday</option>
<option value="B">Wednesday</option>
<option value="B">Thursday</option>
<option value="B">Friday</option>
<option value="A">Saturday</option>
<optoin value="A">Sunday</optoin>
</select>
</div>
<div id="myAnswers">
<div id="A" style="display: none;">
<div id="QuestionC">
<p>Exapmle of question.</p>
</div>
<div id="QuestionD">
<select id="QuestionOptionsD">
<option value disalbe selected>Choose Your Answer</option>
<option value="G">Answer G</option>
<option value="H">Answer H</option>
</select>
</div>
</div>
<div id="B" style="display: none;">
<div id="QuestionE">
<p>Exmaple of another question.</p>
</div>
<div id="QuestionF">
<select id="QuestionOptionsF">
<option value disalbe selected>Choose Your Answer</option>
<option value="I">Answer I</option>
<option value="J">Answer J</option>
</select>
</div>
</div>
</div>
</body>
</html>
Solution 2:
Check out my JSFidle
. Most of code on javascript, remove some html element that doesn't needed.
Solution 3:
The following code makes the option selected when the value is matched with the option value.
<html>
<head></head>
<body>
<label>Quantity:</label><br><br>
<select name="qty" id="qty">
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="450">450</option>
<option value="500">500</option>
</select>
<script>
$(document).ready(function(){
$('#qty option[value={{ $qty }}]').attr('selected','selected');
});
</script>
</body>
</html>
Post a Comment for "Conditional Dropdown List Javascript And Html"