Menu
I'm trying to "combine" the textbox and dropdown box. I can't seem to get them lined up though.
My code:
<input name="" type="text" maxlength="50" style="width: 665px; padding:0px; z-index: 2; position: absolute;" />
<select name="" style="z-index: 1; width: 695px; padding:0px; position:absolute;">
<option value="Value for Item 1" title="Title for Item 1">Item 1</option>
<option value="Value for Item 2" title="Title for Item 2">Item 2</option>
<option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>
979
I've created a demo for you here: http://jsfiddle.net/aJaa6/
*note that I changed the widths so it would fit in the panel.
CSS:
#container
{
position: relative;
}
#input
{
position: absolute;
top: 0;
left: 0;
z-index: 999;
padding: 0;
margin: 0;
}
#select
{
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
}
Markup:
<div id="container">
<input id="input" name="" type="" style="width: 100px;">
<br>
<select id="select" name="" style="width: 115px;">
<option value="Value for Item 1" title="Title for Item 1">Item 1</option>
<option value="Value for Item 2" title="Title for Item 2">Item 2</option>
<option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>
</div>
If you don't want to mess around with absolute positions here is a way where if you click on the text box, it displays the drop down. I haven't added in the javascript to hide the dropdown when you click again, but it should be fairly easy to do.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function showDrop(){
$('#select').attr('size',3);
$("#select").show();
}
function populateTextBox(){
var val = $("#select option:selected").text();
$("#input").val(val);
}
</script>
</head>
<body>
<div id="container">
<input id="input" name="" type="" style="width: 100px;" onclick="showDrop();" />
<br>
<select id="select" name="" style="display:none;width: 100px;" onclick="populateTextBox();">
<option value="Value for Item 1" title="Title for Item 1">Item 1</option>
<option value="Value for Item 2" title="Title for Item 2">Item 2</option>
<option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
