Html 文本框/下拉组合
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6287617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Textbox/Dropdown Combination
提问by Spencer
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>
采纳答案by RandomWebGuy
I've created a demo for you here: http://jsfiddle.net/aJaa6/
我在这里为您创建了一个演示：http: //jsfiddle.net/aJaa6/
*note that I changed the widths so it would fit in the panel.
*请注意，我更改了宽度以使其适合面板。
CSS:
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>
回答by Michael Robinson
回答by vanval
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.
如果您不想弄乱绝对位置，这里有一种方法，如果您单击文本框，它会显示下拉列表。当您再次单击时，我没有在 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>
回答by vivek raj
Can you try this code
你能试试这个代码吗
#input{ position:absolute; top:2; left:2; z-index:999; padding:0; margin:0; }
#select { position:absolute; top:0; left:0; padding:0; margin:0; }<input id="input" type="text" style="width:100px;">
<select id="selectbox" style="width:123px;">
<option value="Value for Item 1" title="Title for Item 1">Item </option>
<option value="Value for Item 2" title="Title for Item 2">Item </option>
<option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>