默認情況下，<select>元素是我不想要的下拉選單：我想顯示完整串列。這可以通過multiple：
<select name="pets" multiple size="5">
<option>dog</option>
<option>cat</option>
<option>hamster</option>
<option>bird</option>
<option>donkey</option>
<option>fish</option>
</select>但顯然用戶可以選擇多個元素。
如何擁有一個完整的串列視圖（例如multiple，沒有下拉選單），但只有一個可能的選定元素？
uj5u.com熱心網友回復：
使用size獲取您想要顯示的專案數量的屬性并將其設定為options您擁有的數量 (6) 以獲得完整的串列視圖。由于您只想允許選擇 1 個專案，因此還要multiple從select元素中洗掉該屬性。
<select name="pets" size=6>
<option>dog</option>
<option>cat</option>
<option>hamster</option>
<option>bird</option>
<option>donkey</option>
<option>fish</option>
</select>檢查mdn以獲取有關select元素可用屬性的更多資訊。
uj5u.com熱心網友回復：
您可以使包含它<select>的高度的 100% 。<form>請參閱此小提琴以獲取包含表單的 div 示例，其中選擇填充表單的高度。
這從一個簡單的結構開始，足以將表單包含在某些東西中，以便您可以看到相對布局。
<div>
<form>
<select id="thelist" name="pets" size="6">
<option value="1">dog</option>
<option value="2">cat</option>
<option value="3">hamster</option>
<option value="4">bird</option>
<option value="5">donkey</option>
<option value="6">fish</option>
</select>
</form>
</div>
我給 div 一個高度，一個背景，這樣你就可以看到它，并且填充，所以它的內容不會自然地覆寫它。將表單設定為您想要的任何高度，包括 100% 的 div。我做到了 90%，所以你仍然可以看到封閉的 div。請注意，除了填充之外，表單的寬度填充了 div 寬度。
然后，您可以將選擇串列的高度設定為表單內您想要的任何內容。這是我的 CSS
div {
background-color: #fff0f0;
height: 40em;
padding: 1.5em 1.5em 0 1.5em;
}
form {
background-color: #f0f0f0;
height: 90%;
}
#thelist {
height: 100%;
}
放在一起作為一個片段，并使其更小以更好地適合這里......
div {
background-color: #fff0f0;
height: 20em;
padding: 1.5em 1.5em 0 1.5em;
}
form {
background-color: #f0f0f0;
height: 40%;
}
#thelist {
height: 100%;
}<div>
<form>
<select id="thelist" name="pets" size="6">
<option value="1">dog</option>
<option value="2">cat</option>
<option value="3">hamster</option>
<option value="4">bird</option>
<option value="5">donkey</option>
<option value="6">fish</option>
</select>
</form>
</div>uj5u.com熱心網友回復：
我測驗了一些解決方案，發現您必須從元素中洗掉multiple屬性<select>
<select name="pets" size="5">
<option>dog</option>
<option>cat</option>
<option>hamster</option>
<option>bird</option>
<option>donkey</option>
<option>fish</option>
</select>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/506639.html
標籤：javascript html css html-选择
上一篇：<script>標簽而不是<button>中的Onclick功能不起作用
下一篇：如何阻止div重疊？