入力テキストを選択オプションに挿入する方法

Question

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

助けていただければ幸いです。

Answer 1

あなたが探している機能は、selectタグではサポートされていません。しかし、回避策があります。オーバーフローコンテナ、入力のリストと囲みが必要です。以下の例を試してみてください。

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