时间戳

首页 > 解决方案 > 垂直滚动条隐藏在选择框中

html - 垂直滚动条隐藏在选择框中

问题描述

我在选择框中有问题，在右侧站点中看不到垂直滚动条，这使我很难在选择框中向下滚动以选择选项。希望有人能指导我如何解决它。

<style>
#parentid{
  max-height:200px;
  overflow:auto;
  size:10;
}
</style>


<select onchange="getComboA(this)" class="form-control blank" id="parentid" name="parentid" title="parentid">
    <option value="please_select">--Sila Pilih--</option>
    <option value="0">New Category</option>
    <?php
    $sql_incharge = 'select * from filing_code_management where status=1 and is_approved = 1 and category_id in (1,2,3,4)ORDER BY id ASC';
    $arr_incharge = db_conn_select($sql_incharge);
    foreach ($arr_incharge as $rs_incharge) {
        $folder_location      = $rs_incharge['folder_location'];
        $function_code_select = $rs_incharge['function_code'];
        $function_name_select = $rs_incharge['function_name'];
        $activity_code_select = $rs_incharge['activity_code'];
        $activity_name_select = $rs_incharge['activity_name'];
        $name_select          = $rs_incharge['name'];
        $id_select            = $rs_incharge['id'];
        $root             = $rs_incharge['id_root'];
        $category_id          = $rs_incharge['category_id']; // get category_id here
        // save the data here↓↓ in data attributes 
        echo "<option value='{$id_select}' data-cat_id='{$category_id}' data-root='{$root}'>{$name_select}</option>";
        }
?></select>

向下滚动问题

我想要示例图片下方的预期结果：

输出 2

提前致谢。

标签： htmlcssscroll

解决方案

我回答得更清楚了，但是这个答案已经发布在选择框的选项中设置宽度

如果需要，您可以添加一个 setTimeOut 以确保它得到很好的应用

$('option').each(function() {
  var optionText = this.text;
  var newOption = optionText.substring(0, 36);
  $(this).text(newOption + '...');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<select style="width:250px">
    <option>Select your University</option>
    <option>Bangladesh University of Engineering and Technology</option>
    <option>Mawlana Bhashani Science and Technology University</option>
</select>

推荐阅读