jquery - 当方向为 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;
}

Answer 1

试试这个

 <div style="width: 525px; margin:auto; padding-top: 25px;">
    <select dir="rtl" id="ddlArea">
        <option dir="ltr" value="-1">-- Select --</option>


        <option dir="ltr" value="3">Sport</option>
        <option dir="ltr" value="4">Electronics</option>

    </select>

    <select dir="rtl" id="ddlBrand">

                <option dir="ltr" class="ddlBrandItem area_3" value="6">BasketBall</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="6">Soccer</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="7">Tennis </option>
        <option dir="ltr" class="ddlBrandItem area_3" value="6">BasketBall</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="6">Soccer</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="7">Tennis </option>
        <option dir="ltr" class="ddlBrandItem area_3" value="6">BasketBall</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="6">Soccer</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="7">Tennis </option>
        <option dir="ltr" class="ddlBrandItem area_3" value="6">BasketBall</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="6">Soccer</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="7">Tennis </option>
        <option dir="ltr" class="ddlBrandItem area_3" value="6">BasketBall</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="6">Soccer</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="7">Tennis </option>
        <option dir="ltr" class="ddlBrandItem area_3" value="6">BasketBall</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="6">Soccer</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="7">Tennis </option>
        <option dir="ltr" class="ddlBrandItem area_3" value="6">BasketBall</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="6">Soccer</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="7">Tennis </option>
        <option dir="ltr" class="ddlBrandItem area_3" value="6">BasketBall</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="6">Soccer</option>
                <option dir="ltr" class="ddlBrandItem area_3" value="7">Tennis </option>


    </select>


    </div>

http://jsfiddle.net/17b4ydfc/6/