文本框/下拉菜單組合

我正在嘗試「合併」文本框和下拉框。我似乎無法讓他們排隊。文本框/下拉菜單組合

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

文本框/下拉菜單組合

回答

相關問題