当我需要显示更多内容时，我的 select 框被缩小为两个条目

Question

问题是我的 select 箱子物品被缩小到 2 件

select编辑的项目和所有。

我需要它来显示

的所有项目

function filterTheData() {
        debugger;
        var selectionFilter = {
            Category: window.selectedCategory,
            Year: window.selectedYear,
            Group: window.selectedSubmenu
        }

    if(isNaN(window.selectedYear)) {
        delete selectionFilter.Year
    }

    if(window.selectedCategory === 'all') {
        delete selectionFilter.Category
    }

    if(window.selectedSubmenu === 'all') {
        delete selectionFilter.Group
    }


    window.filteredData = _.filter(window.data, selectionFilter)
    delete selectionFilter.Year

    window.availableButtonYears = _.uniq(_.map(_.filter(window.data, selectionFilter), "Year"));
    window.availableCategory = _.uniq(_.map(_.filter(window.data, selectionFilter), "Category"));


    window.table.clear();
    window.table.rows.add(window.filteredData);
    window.table.draw();
    redrawButtonToolbar();
    createComboBox();
}



function createComboBox() {
    console.log("inside combo");

    let availableCategory = window.availableButtonYears;
    $('#categorySelectBox option').remove();


    $('#categorySelectBox option').remove();
    let categories = "";

    if((window.selectedSubmenu === "all")&&(window.selectedYear === "all"))
    {
        console.log("1st condition");
        categories = window.data;
    }

    if((window.selectedSubmenu === "all")&&(window.selectedYear !== "all"))
    {
        console.log("2nd condition");
        categories = _.filter(window.filteredData, {
            Year: window.selectedYear
        });
    }

    if((window.selectedSubmenu !== "all")&&(window.selectedYear === "all"))
    {
        console.log("3rd condition");
        categories = _.filter(window.filteredData, {
            Group: window.selectedSubmenu
        });
    }

    if((window.selectedSubmenu !== "all")&&(window.selectedYear !== "all"))
    {
        console.log("4th condition");
        categories = _.filter(window.filteredData, {
            Group: window.selectedSubmenu,
            Year: window.selectedYear
        });
    }

    categories = _.map(categories, 'Category');
    categories = _.uniq(categories);
    console.log(categories);
    categories = _.sortBy(categories)

    $('<option value="all">All</option>').appendTo('#categorySelectBox');
    _.each(categories, function(category) {
        var selected = '';

        var optionElement = $('<option />').val(category).text(category)

        if(category === window.selectedCategory) {
            optionElement.prop('selected', true)
        }
        $(optionElement).appendTo('#categorySelectBox');
    });

}

在 select 来自 select 框的一项后，数据被过滤为 2 项。

我分享这张截图是为了说明我的意思。

来自 console.log

列表中有 10 个项目。

[object Array]
0 "Snapple"
1 "Family"
2 "General"
3 "Computer"
4 "Company"
5 "Other"
6 "Netflix"
7 "Keyboard"
8 "Mouse"
9 "iPhone"

实际的项目名称已更改，但这是相似的。

Answer 1

您需要指定尺寸参数：

<select size="4" multiplie>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

And/or指定身高：

select {
  height: 200px;
}

<select multiple>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

因为看起来您的选项数量是动态的，所以使用 size 和等于选项数量的值可能是您最好的选择。

如果这不起作用，double-check 您没有来自限制 select.

高度的其他来源的 CSS

当我需要显示更多内容时，我的 select 框被缩小为两个条目

My select box is being narrowed to two entries when I need to show more

javascript

jquery

json

html-select

drop-down-menu