javascript - 将下拉列表触发的显示/隐藏更改为 li JS

Question

如果客户想要搜索长租特性或待售特性，我会使用主下拉按钮进行切换，然后此选项会显示/隐藏最低和最高价格搜索选项中的字段。我想使用 ul 和 li 将主下拉切换从下拉菜单更改为 bootstrap nav-pills，因此需要修改以下代码:

<select class="select_type">
    <option class="propertySalesOption">Property Sales</option>
    <option class="longLetsOption">Long Lets</option>
</select>

 $(".select_type").change(function () {
    if ($(this).find(':selected')[0].className === "propertySalesOption") {
        $('.rentalSearch').hide();
        $('.lettingsSearch').hide();
        $('.saleSearch, .SalesRentSearch').fadeIn('fast');
        $("#longletval").val("0");
    }
    else if ($(this).find(':selected')[0].className === "longLetsOption") {
        $('.saleSearch').hide();
        $('.lettingsSearch').hide();
        $('.rentalSearch, .SalesRentSearch').fadeIn('fast');
        $("#longletval").val("1");
    }
    else if ($(this).find(':selected')[0].className === "holidayLettingsOption") {
        $('.saleSearch').hide();
        $('.rentalSearch').hide();
        $('.SalesRentSearch').hide();
        $('.lettingsSearch').fadeIn('fast');
    }
});

<select name="MinimumPrice" class="form-control selectpicker">
    <option value="0">Min Price</option>
    <option class="rentalSearch" style="display:none;" value="500">500&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="600">600&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="700">700&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="800">800&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="900">900&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="1000">1.000&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="1200">1.200&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="1400">1.400&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="1600">1.600&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="1800">1.800&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="2000">2.000&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="2500">2.500&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="3000">3.000&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="4000">4.000&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="5000">5.000&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="10000">10.000&euro; (/m)</option>
    <option class="rentalSearch" style="display:none;" value="15000">15.000&euro; (/m)</option>

    <option class="saleSearch" value="50000">50.000&euro;</option>
    <option class="saleSearch" value="75000">75.000&euro;</option>
    <option class="saleSearch" value="100000">100.000&euro;</option>
    <option class="saleSearch" value="125000">125.000&euro;</option>
    <option class="saleSearch" value="150000">150.000&euro;</option>
    <option class="saleSearch" value="175000">175.000&euro;</option>
    <option class="saleSearch" value="200000">200.000&euro;</option>
    <option class="saleSearch" value="250000">250.000&euro;</option>
    <option class="saleSearch" value="300000">300.000&euro;</option>
    <option class="saleSearch" value="350000">350.000&euro;</option>
    <option class="saleSearch" value="400000">400.000&euro;</option>
    <option class="saleSearch" value="450000">450.000&euro;</option>
    <option class="saleSearch" value="500000">500.000&euro;</option>
    <option class="saleSearch" value="550000">550.000&euro;</option>
    <option class="saleSearch" value="600000">600.000&euro;</option>
    <option class="saleSearch" value="650000">650.000&euro;</option>
    <option class="saleSearch" value="700000">700.000&euro;</option>
    <option class="saleSearch" value="750000">750.000&euro;</option>
    <option class="saleSearch" value="800000">800.000&euro;</option>
    <option class="saleSearch" value="850000">850.000&euro;</option>
    <option class="saleSearch" value="900000">900.000&euro;</option>
    <option class="saleSearch" value="950000">950.000&euro;</option>
    <option class="saleSearch" value="1000000">1.000.000&euro;</option>
    <option class="saleSearch" value="1500000">1.500.000&euro;</option>
    <option class="saleSearch" value="2000000">2.000.000&euro;</option>
    <option class="saleSearch" value="2500000">2.500.000&euro;</option>
    <option class="saleSearch" value="3000000">3.000.000&euro;</option>
    <option class="saleSearch" value="3500000">3.500.000&euro;</option>
    <option class="saleSearch" value="4000000">4.000.000&euro;</option>
    <option class="saleSearch" value="4500000">4.500.000&euro;</option>
</select>

Answer 1

您不需要检查类 $(this).find(':selected')[0].className === "propertySalesOption"，您可以简单地检查选择值。试试这个:

$(".select_type").change(function () {
            if ($(this).val() == "Property Sales") {
                $('.rentalSearch').hide();
                $('.lettingsSearch').hide();
                $('.saleSearch, .SalesRentSearch').fadeIn('fast');
                $("#longletval").val("0");
            } else if ($(this).val() == "Long Lets") {
                $('.saleSearch').hide();
                $('.lettingsSearch').hide();
                $('.rentalSearch, .SalesRentSearch').fadeIn('fast');
                $("#longletval").val("1");
            } else if ($(this).val() == "Holiday Lets") {
                $('.saleSearch').hide();
                $('.rentalSearch').hide();
                $('.SalesRentSearch').hide();
                $('.lettingsSearch').fadeIn('fast');
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <select class="select_type">
            <option class="propertySalesOption">Property Sales</option>
            <option class="longLetsOption">Long Lets</option>
        </select>



<select name="MinimumPrice" class="form-control selectpicker">
            <option value="0">Min Price</option>
            <option class="rentalSearch" style="display:none;" value="500">500&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="600">600&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="700">700&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="800">800&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="900">900&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="1000">1.000&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="1200">1.200&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="1400">1.400&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="1600">1.600&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="1800">1.800&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="2000">2.000&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="2500">2.500&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="3000">3.000&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="4000">4.000&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="5000">5.000&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="10000">10.000&euro; (/m)</option>
            <option class="rentalSearch" style="display:none;" value="15000">15.000&euro; (/m)</option>

            <option class="saleSearch" value="50000">50.000&euro;</option>
            <option class="saleSearch" value="75000">75.000&euro;</option>
            <option class="saleSearch" value="100000">100.000&euro;</option>
            <option class="saleSearch" value="125000">125.000&euro;</option>
            <option class="saleSearch" value="150000">150.000&euro;</option>
            <option class="saleSearch" value="175000">175.000&euro;</option>
            <option class="saleSearch" value="200000">200.000&euro;</option>
            <option class="saleSearch" value="250000">250.000&euro;</option>
            <option class="saleSearch" value="300000">300.000&euro;</option>
            <option class="saleSearch" value="350000">350.000&euro;</option>
            <option class="saleSearch" value="400000">400.000&euro;</option>
            <option class="saleSearch" value="450000">450.000&euro;</option>
            <option class="saleSearch" value="500000">500.000&euro;</option>
            <option class="saleSearch" value="550000">550.000&euro;</option>
            <option class="saleSearch" value="600000">600.000&euro;</option>
            <option class="saleSearch" value="650000">650.000&euro;</option>
            <option class="saleSearch" value="700000">700.000&euro;</option>
            <option class="saleSearch" value="750000">750.000&euro;</option>
            <option class="saleSearch" value="800000">800.000&euro;</option>
            <option class="saleSearch" value="850000">850.000&euro;</option>
            <option class="saleSearch" value="900000">900.000&euro;</option>
            <option class="saleSearch" value="950000">950.000&euro;</option>
            <option class="saleSearch" value="1000000">1.000.000&euro;</option>
            <option class="saleSearch" value="1500000">1.500.000&euro;</option>
            <option class="saleSearch" value="2000000">2.000.000&euro;</option>
            <option class="saleSearch" value="2500000">2.500.000&euro;</option>
            <option class="saleSearch" value="3000000">3.000.000&euro;</option>
            <option class="saleSearch" value="3500000">3.500.000&euro;</option>
            <option class="saleSearch" value="4000000">4.000.000&euro;</option>
            <option class="saleSearch" value="4500000">4.500.000&euro;</option>
        </select>