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();
}
});<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html><head></head><body><divid="myQuestions"><selectid="QuestionOptions"><optionvaluedisalbeselected>What Day is it?</option><optionvalue="A">Monday</option><optionvalue="A">Tuesday</option><optionvalue="B">Wednesday</option><optionvalue="B">Thursday</option><optionvalue="B">Friday</option><optionvalue="A">Saturday</option><optoinvalue="A">Sunday</optoin></select></div><divid="myAnswers"><divid="A"style="display: none;"><divid="QuestionC"><p>Exapmle of question.</p></div><divid="QuestionD"><selectid="QuestionOptionsD"><optionvaluedisalbeselected>Choose Your Answer</option><optionvalue="G">Answer G</option><optionvalue="H">Answer H</option></select></div></div><divid="B"style="display: none;"><divid="QuestionE"><p>Exmaple of another question.</p></div><divid="QuestionF"><selectid="QuestionOptionsF"><optionvaluedisalbeselected>Choose Your Answer</option><optionvalue="I">Answer I</option><optionvalue="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><selectname="qty"id="qty"><optionvalue="50">50</option><optionvalue="100">100</option><optionvalue="150">150</option><optionvalue="200">200</option><optionvalue="250">250</option><optionvalue="300">300</option><optionvalue="350">350</option><optionvalue="400">400</option><optionvalue="450">450</option><optionvalue="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"