更改显示/隐藏从下拉菜单触发到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>