HTML drop down box redirect
Question
just putting together a simple html webpage and i wanted to add a drop down box where i would select an option and it would bring up text depending on what was selected.
I have this so far. I know i would probably have to use javascript but i dont know where to start.
<html>
<head>
<title> My webpage </title>
</head>
<body>
<h1> Times Tables! </h1>
<p> Click on the drop down box to select the tables you want to see </p>
<select>
<option value="Please select">Please select</option>
<option value="1x0 =0 1x1 =1 1x2 =2 1x3 =3">1 time table</option>
<option value="2 times table">2 times table</option>
<option value="3 times table">3 times table</option>
<option value="4 times table">4 times table</option>
<option value="5 times table">5 times table</option>
<option value="6 times table">6 times table</option>
<option value="7 times table">7 times table</option>
<option value="8 times table">8 times table</option>
<option value="9 times table">9 times table</option>
<option value="10 times table">10 times table</option>
<option value="11 times table">11 times table</option>
<option value="12 times table">12 times table</option>
</select>
<p>
</p>
</body>
</html>
Thanks
3 answers
solution1
1 2015-11-06 10:01:50
If i understood ur question correctly.. are you asking for, how to get the selected option's text.. If so, give a name and ID to <select> box..
<select name='sel_name' id='sel_name' onchange='get_selected()'>
and then use javascript and call the function onchange of select box..
function get_selected()
{
//this will get you the selected option's text
document.getElementById('sel_name').options[document.getElementById('sel_name').selectedIndex].text;
// to just get the value of the select box you can use
document.getElementById('sel_name').value;
}
solution2
1 2015-11-06 10:04:22
You're right that you want to use JavaScript. In fact, using jQuery would be even better for the event handling.
If you create a function $('#selectID').on('change', function(){}); (You'll have to give your select and id to identify it by) Then inside the function parentheses write the code to do what you want. In your case if it's to display some form of text you could just
alert($('#selectID').val()) or just jQuery to alter the DOM
solution3
0 ACCPTED 2015-11-06 10:05:22
Give an ID to Select Tag. Just Like
<select id="selected">
then the jQuery code:
<script type="text/javascript">
$(document).ready(function(){
$('#selected').change(function(){
alert($(this).val());
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.