プルダウンからリリーにトリガーされた表示/非表示を変更するJS

Question

私はメインドロップダウンボタンを使用して、クライアントがロングletプロパティまたはセールスプロパティを検索するかどうかをトグルします。このオプションは、最小および最大価格検索のフィールドを表示/非表示にしますオプション。私は、ULとLiのを使用してNAV-薬をブートストラップするドロップダウンから、メインドロップダウントグルを変更したいので、次のコードを変更する必要があります。

<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>