How To Hide/show Drop Down List Content In Html
I have two options in the list (pickup/drop), what I want is that when user select pickup from the list the (pick date /pick time ) fields appear and (drop date / drop time) fields
Solution 1:
First don't use paragraph tag here.
Use div tag and place,
Pickup date <inputtype="date" name="pte" >
Pickup time<inputtype= time name= ptm >
and
Drop date <inputtype="date" name="dte" >
Drop time<inputtype= time name= dtm >
in a seperate div tags namely pickup and drop.
Give needed styles with
display:none;
Now in javascript, use On select event on selected item and change the selected div id's display as block.Like
functiononsElect()
{
document.getElementById("pickup").style.display=block;
}
Please expand the functionality based on your requirements.
Solution 2:
<html>
Pickup date <inputclass="type_pickup typetoggle"type="date"name="pte">
Pickup time <inputclass="type_pickup typetoggle"type="time"name="ptm"></html><scripttype="text/javascript">
$('#myList').change( function() {
$('.typetoggle').hide();
if ($(this).val() == "1")
$('.type_pickup').show();
if ($(this).val() == "2")
$('.type_drop').show();
});
</script>Solution 3:
To add dynamics like this you will have to use javascript. You could go for something like this.
functiontoggle() {
var foo = document.getElementById('foo'),
bar = document.getElementById('bar'),
foodiv = document.getElementById('foo-div'),
bardiv = document.getElementById('bar-div');
if (foo.checked) {
foodiv.className = '';
bardiv.className = 'hidden';
} else {
foodiv.className = 'hidden';
bardiv.className = '';
}
}
A simple js function that will change the class for elements from hidden to none.
If that is all you desire, then there's no need for using a library like jQuery. If you want to use jQuery you can learn more about it and all of it's great features here.
Post a Comment for "How To Hide/show Drop Down List Content In Html"