文本框/下拉菜单组合
问题描述:
我正在尝试“合并”文本框和下拉框。我似乎无法让他们排队。文本框/下拉菜单组合
我的代码:
<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>
答
我已经创建了一个演示您的位置:http://jsfiddle.net/aJaa6/
*注意,我改变了宽度,所以它会适合在面板上。
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;
}
标记:
<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>
+0
完美。谢谢! :) – Spencer 2011-06-09 03:50:09
答
如果你不想在这里绝对位置周围的混乱是,如果你点击文本框,在某种程度上,它显示落下。当你再次点击时,我没有在javascript中添加下拉菜单,但它应该相当容易。
<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>
顺便说一句:你试图创建的小部件称为[组合框](http://en.wikipedia.org/wiki/Combo_box)。 – Asaph 2011-06-09 02:57:26
[小提琴](http://jsfiddle.net/w7YdQ/)似乎很好。 'edit'-我的意思是排队正确! – Lobo 2011-06-09 02:58:15