2016-03-27 88 views
-1

我試圖在<select>元素的<option>中插入輸入文本字段。我正在使用JSP。以下是我正在嘗試做的事情,但這不起作用。如何插入輸入文本以選擇選項

<!--this is the code--> 
<select multiple="multiple" size="10"> 
    <option value="option1">Option 1<input type="text" value="A" style="width: 20px"/></option> 
    <option value="option2">Option 2<input type="text" value="B" style="width: 20px"/></option> 
    <option value="option3">Option 3<input type="text" value="C" style="width: 20px"/></option> 
    <option value="option4">Option 4<input type="text" value="D" style="width: 20px"/></option> 
</select> 

任何幫助表示讚賞。

+0

請編輯您的問題,並添加代碼作爲代碼的環境,而不是一個屏幕截圖。 –

+0

歡迎來到Stack Overflow!我編輯了您的問題,將您的代碼包含在問題主體中並正確格式化 - 請參閱編輯幫助以獲取有關格式化的更多信息。請編輯您的問題以提供識別特定問題所需的任何其他詳細信息。祝你好運! – Wtower

+0

選擇標籤不支持您正在查找的功能。但是有一個解決方法。你需要一個溢出容器,列出並封閉輸入。 – Arvind

回答

0

選擇標籤不支持您正在查找的功能。但是有一個解決方法。你需要一個溢出容器,列出並封閉輸入。試試下面的例子。

.container { 
 
    height: 100px; 
 
    overflow: hidden; 
 
    overflow-y: auto; 
 
    border: 1px ridge grey; 
 
    display: inline-block; 
 
} 
 
.list-box { 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 175px; 
 
} 
 
.list-item { 
 
    margin: 3px; 
 
} 
 
.list-item input[type=text] { 
 
    width: 149px; 
 
}
<div class="container"> 
 
    <ul class="list-box"> 
 
    <li class="list-item"> 
 
     <input type="text" /> 
 
    </li> 
 
    <li class="list-item"> 
 
     <input type="text" /> 
 
    </li> 
 
    <li class="list-item"> 
 
     <input type="text" /> 
 
    </li> 
 
    <li class="list-item"> 
 
     <input type="text" /> 
 
    </li> 
 
    <li class="list-item"> 
 
     <input type="text" /> 
 
    </li> 
 
    </ul> 
 
</div>

+0

謝謝Arvind,我找到了一種方法來幫助你。 –