HTML選擇多個不滾動和沒有Ctrl

我有一個多重選擇。這些選項通過AJAX調用進行填充。選項的數量可能會有很大差異。HTML選擇多個不滾動和沒有Ctrl

<div class="col-md-9"> 
    <div class="form-group"> 
     <select multiple class="commits2 form-control"> 
      <option>Please select a branch and a tag!</option> 
     </select> 
    </div> 
</div>

我想沒有選擇的垂直滾動條並一次在頁面上顯示所有選項。所以我使用這個CSS：

.commits2{ 
    overflow-y: hidden; 
}

正如你可以看到我使用引導。我只能渲染小容器中的前4個選項的代碼，我甚至無法進一步滾動。我怎樣才能達到我需要的？

我也曾嘗試：

.commits2{ 
    overflow-y: auto; 
}

，因爲它留下右邊的滾動條，這是行不通的。

我也想能夠選擇多個選項，而不必按住ctrl。以下是應該啓用該功能的jQuery代碼。

$('option').mousedown(function(e) { 
     e.preventDefault(); 
     $(this).prop('selected', $(this).prop('selected') ? false : true); 
     return false; 
});

對於一些未知的原因，我只能點擊2個選項，並沒有更多的，如果我用這個代碼，如果我向下滾動列表，按下它拋出我開始和不選擇該選項。

這裏是引導包括我使用：

<link href = "css/bootstrap.min.css" rel = "stylesheet"> 
<script src = "js/bootstrap.min.js"></script>

來源

2017-06-20 dannemp

，因爲你已經設置滾動到隱藏的不能再滾動。

設置commits2的overflow-y屬性auto

.commits2{ 
    overflow-y: auto; 
}

確定列表項的長度，將其添加添加爲您選擇項目的大小屬性。因此，例如，如果你的Ajax調用返回9項設置你的select到9

<select multiple class="commits2 form-control" size="9">

這使得選擇顯示一切size財產。

您的多重選擇應該像您一樣正常工作。

$('option').mousedown(function(e) { 
    e.preventDefault(); 
    $(this).prop('selected', $(this).prop('selected') ? false : true); 
    return false; 
});

看看下面的筆： https://codepen.io/fawmi/pen/RgVRJx

來源

2017-06-20 15:58:03

設置選擇尺寸正確的伎倆，但仍然jQuerry不工作的權利，我只是不能點擊一些選項，我可以選擇其中一些，但不是全部。 – dannemp

你有沒有看過我的筆在https://codepen.io/fawmi/pen/RgVRJx 我已經測試過它，它工作正常 – 2017-06-21 10:02:40

是的，我已經看到在你的筆中一切都按預期工作，我不明白爲什麼我得到了我已經解釋的奇怪行爲... – dannemp

HTML選擇多個不滾動和沒有Ctrl

回答

相關問題