文本框/下拉菜单组合

我正在尝试“合并”文本框和下拉框。我似乎无法让他们排队。文本框/下拉菜单组合

enter image description here

我的代码：

<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>

来源

2011-06-09 Spencer

顺便说一句：你试图创建的小部件称为[组合框]（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

我已经创建了一个演示您的位置：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>

来源

2011-06-09 02:59:52 RandomWebGuy

完美。谢谢！ :) – Spencer 2011-06-09 03:50:09

你有没有考虑过使用FlexBox？它完成你想要的，并有很多很好的可定制功能。

来源

2011-06-09 02:57:32

FlexBox（至少在Firefox中）被精确渲染（至少在您链接的示例页面中）。 – kpull1 2017-02-02 10:59:53

如果你不想在这里绝对位置周围的混乱是，如果你点击文本框，在某种程度上，它显示落下。当你再次点击时，我没有在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>

来源

2015-02-16 16:54:54 vanval

文本框/下拉菜单组合

回答

相关问题