当列表变得冗长时，选择下拉列表不能正确显示

Question

我正在努力实现这样的目标： jQuery show/hide options from one select drop down, when option on other select dropdown is slected

这就是我所做的并且它工作正常，除非我点击每年或每季度，频率列表只显示一个项目，我必须单击向上/向下滚动按钮才能看到其他选项。

HTML

<td> Consumption type :</td>
<td>
<select id="consumption" class="form-control" style = "width:400px"> 
<option value= "menu" selected> Select consumption type </option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
<option value="yearly">Yearly</option>
<option value="quarterly">Quarterly</option>
</select>
</td>


<td> Frequency : </td>
<td>
<select id="frequency" class="form-control" style = "width:400px" disabled> 
<option selected> Select frequency </option>

<!--Weekly Options-->
<option class="weekly" value="monday">Monday</option>
<option class="weekly" value="tuesday">Tuesday</option>
<option class="weekly" value="wednesday">Wednesday</option>
<option class="weekly" value="thursday">Thursday</option>
<option class="weekly" value="friday">Friday</option>
<option class="weekly" value="saturday">Saturday</option>
<option class="weekly" value="sunday">Sunday</option>

<!--Monthly Options-->
<option class="monthly" value="1">1</option>
<option class="monthly" value="2">2</option>
<option class="monthly" value="3">3</option>
<option class="monthly" value="4">4</option>
<option class="monthly" value="5">5</option>
<option class="monthly" value="6">6</option>
<option class="monthly" value="7">7</option>
<option class="monthly" value="8">8</option>
<option class="monthly" value="9">9</option>
<option class="monthly" value="10">10</option>
<option class="monthly" value="11">11</option>
<option class="monthly" value="12">12</option> 
<option class="monthly" value="13">13</option>
<option class="monthly" value="14">14</option>
<option class="monthly" value="15">15</option>
<option class="monthly" value="16">16</option>
<option class="monthly" value="17">17</option>
<option class="monthly" value="18">18</option>
<option class="monthly" value="19">19</option>
<option class="monthly" value="20">20</option>
<option class="monthly" value="21">21</option>
<option class="monthly" value="22">22</option>
<option class="monthly" value="23">23</option>
<option class="monthly" value="24">24</option> 
<option class="monthly" value="25">25</option>
<option class="monthly" value="26">26</option>
<option class="monthly" value="27">27</option>
<option class="monthly" value="28">28</option>
<option class="monthly" value="29">29</option>
<option class="monthly" value="30">30</option>
<option class="monthly" value="31">31</option>                                                                                       

<!--Yearly/Quarterly Options-->                               
<option class="yearly" value="january">January</option>
<option class="yearly" value="february">February</option>
<option class="yearly" value="march">March</option>
<option class="yearly" value="april">April</option>
<option class="yearly" value="may">May</option>
<option class="yearly" value="june">June</option>
<option class="yearly" value="july">July</option>
<option class="yearly" value="august">August</option>
<option class="yearly" value="september">September</option>
<option class="yearly" value="october">October</option>
<option class="yearly" value="november">November</option>
<option class="yearly" value="december">December</option>                                                  

</select>
</td>

脚本

$(document).ready(function () {
$("#consumption").change(function () {
    var value = $("#consumption").attr("value");
    $(".weekly, .monthly, .yearly").hide();
    switch(value) {         
        case "weekly":
            {                            
                $("#frequency").removeAttr("disabled");                            
                $(".weekly").show();
            }
            break;
        case "monthly":
            {                            
                $("#frequency").removeAttr("disabled");                            
                $(".monthly").show();
            }
            break;
        case "yearly":
            {                            
                $("#frequency").removeAttr("disabled");                                                      
                $(".yearly").show();
            }
            break;
        case "quarterly":
            {                            
                $("#frequency").removeAttr("disabled");                            
                $(".yearly").show();
            }
            break;          
    }

    });
});

如果有人能提供帮助，我们将不胜感激。谢谢！

编辑：这是下拉列表的屏幕截图。

Answer 1

您可以使用Select HTML元素的height属性，并尝试在以下条件下操纵其高度：

$('#frequency').height('200px');

OR

尝试改变组合框的大小，如：

$('#frequency').size = 10;

Answer 2

我已用另一种方式解决了这个问题。请检查链接

http://plnkr.co/edit/fnJUoDXa7TMRdEjNpPf5?p=preview