Hi all,
I have a page that basically have a drop down box, when a user select an option from the drop down box, another drop down box would appear based on what was selected on the first drop down box.
What I am looking to do is, when the second drop down box appear, I want it to appear beside/in the same row as the drop down box, but for some reason it appear below the first drop down box. I could have them show up in the same row with tables, but I do not want to use any tables, I just want to use CSS to accomplish this. Any ideas? Please advise, thanks!
I have a page that basically have a drop down box, when a user select an option from the drop down box, another drop down box would appear based on what was selected on the first drop down box.
What I am looking to do is, when the second drop down box appear, I want it to appear beside/in the same row as the drop down box, but for some reason it appear below the first drop down box. I could have them show up in the same row with tables, but I do not want to use any tables, I just want to use CSS to accomplish this. Any ideas? Please advise, thanks!
Code:
<style type="text/css">
#Line1 {
background-color: #ddffdd;
position: absolute;
left: 0;
top: 0;
width: 600px;
}
</style>
<script type="text/javascript">
function display(obj,id1) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
}
</script>
<body>
<div id="Line1">
Line 1
<select name="Line1Type" size="5" onchange="display(this,'List2');">
<option value="Empty" selected>---Empty---</option>
<option value="Option1"> Option1</option>
<option value="Option2"> Option2</option>
</select>
<span id=“List2" style="display: none;">
>>
<select name= “List2" size="5" id="List2">
<option value="Empty" selected>---Empty---</option>
<option value="Option1"> Option1</option>
<option value="Option2"> Option2</option>
<option value="Option3"> Option3</option>
</select>
</span>
</body>