Выберите входной скрыть текст, когда направление RTL

Question

У меня есть HTML <select> с direction: rtl;

Проблема в том, что начало текста скрыта.

Проблема связана с количеством элементов <option> в списке. когда я удаляю один элемент, текст больше не скрывается.

Вы можете увидеть пример здесь: JSFiddle

Вот мой код:

<div> 
    <select id="ddlArea"> 
     <option value="-1">-- Select --</option> 
     <option value="3">Sport</option> 
     <option value="4">Electronics</option> 
    </select> 
    <select id="ddlBrand"> 
     <option class="ddlBrandItemFirst" value="-1">-- Select --</option> 
     <option class="ddlBrandItem area_3" value="6">BasketBall</option> 
     <option class="ddlBrandItem area_3" value="6">Soccer</option> 
     <option class="ddlBrandItem area_3" value="7">Tennis</option> 
     <option class="ddlBrandItem area_6" value="9">111111</option> 
     <option class="ddlBrandItem area_6" value="10">222222</option> 
     <option class="ddlBrandItem area_6" value="12">333333</option> 
     <option class="ddlBrandItem area_5" value="13">444444</option> 
     <option class="ddlBrandItem area_4" value="14">Digital Camera</option> 
     <option class="ddlBrandItem area_4" value="14">Computers</option> 
     <option class="ddlBrandItem area_4" value="14">Hard Disk</option> 
     <option class="ddlBrandItem area_4" value="15">Gadgets</option> 
     <option class="ddlBrandItem area_2" value="16">555555</option> 
     <option class="ddlBrandItem area_5" value="17">666666</option> 
     <option class="ddlBrandItem area_6" value="18">CFMOTO</option> 
     <option class="ddlBrandItem area_1" value="19">777777</option> 
     <option class="ddlBrandItem area_6" value="20">888888</option> 
     <option class="ddlBrandItem area_1" value="21">999999</option> 
     <option class="ddlBrandItem area_2" value="22">100000</option> 
     <option class="ddlBrandItem area_1" value="23">rrrrr</option> 
     <option class="ddlBrandItem area_11" value="5555">eeeeeeee</option> 
    </select> 
</div> 

Сценарий:

$(function() { 
    $('#ddlBrand').attr('disabled', 'disabled'); 
    $('#ddlProduct').attr('disabled', 'disabled'); 
}); 
$('#ddlArea').on('change', function() { 
    // Enable 
    $('#ddlBrand').removeAttr('disabled'); 

    //hide all items in ddl 
    $(".ddlBrandItem").hide(); 

    // show only items for this areaId 
    $(".area_" + this.value).show(); 

    // show the first option (show all) 
    $('.ddlBrandItemFirst').prop('selected', true); 
}); 

$('#ddlBrand').on('change', function() { 
    // Enable 
    $('#ddlProduct').removeAttr('disabled'); 
    //hide all items in ddl 
    $(".ddlProductItem").hide(); 

    // show only items for this areaId 
    $(".brand_" + this.value).show(); 

    // show the first option (show all) 
    $('.ddlProductItemFirst').prop('selected', true); 
}); 

Стиль:

body { 
    direction: rtl; 
}