2017-04-10 75 views
0

我現在使用的多選擇引導下拉選擇是打破我使用的JS來顯示不同的變量,如果它是一個財產出售或長期讓即價格範圍。多選擇引導下拉選項選擇器不總是顯示正確/不同的變量

我現在使用的Javascript正在工作,當我選擇長時間下拉完美(默認情況下顯示銷售價格的銷售選項),所以它顯示正確的每月價格,但是當我回到銷售下拉列表期權,這應該讓我回到銷售價格,它保持固定的長期價格選項。

$(".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 class="select_type form-control selectpicker"> 
     <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">&euro;500 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="600">&euro;600 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="700">&euro;700 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="800">&euro;800 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="900">&euro;900 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="1000">&euro;1.000 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="1200">&euro;1.200 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="1400">&euro;1.400 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="1600">&euro;1.600 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="1800">&euro;1.800 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="2000">&euro;2.000 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="2500">&euro;2.500 (/m)</option>        
      <option class="rentalSearch" style="display:none;" value="3000">&euro;3.000 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="4000">&euro;4.000 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="5000">&euro;5.000 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="10000">&euro;10.000 (/m)</option> 
      <option class="rentalSearch" style="display:none;" value="15000">&euro;15.000 (/m)</option> 

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

當我加入這個JS低於它工作正常,但是下拉選項在容器切斷,並在我的二次搜索打亂了下拉選項,請參考下面的代碼和截圖:

<script> 
     $(document).ready(function() { 
      $('.selectpicker').selectpicker(); 
     });    
    </script> 

screenshot home search

secondary search

+0

您使用的是bootstrap v3嗎?你有沒有在你的頁面上包含任何其他的CSS文件,我認爲這不是默認的主題,對吧?你有其他的js文件加載目標下拉可能嗎?你可以爲我們建立jsfiddle來查看該行爲的實時版本嗎? –

+0

你能分享完整的html請 –

+0

我看到價格正確顯示:https://i.imgur.com/nyfsNlF.png FF&Chrome –

回答

0

我已經包括了最新版本的jQuery您的JavaScript之前,它的工作原理

<script src="http://code.jquery.com/jquery-latest.min.js" 
    type="text/javascript"></script> 

<script> 

$(".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'); 
    } 
}); 

此外還添加腳本標籤到您的JavaScript代碼。

在此處查看:http://cssdeck.com/labs/ww8wpwn7

+0

您有錯誤170行 嘗試對該行進行註釋並測試選擇是否有效。如果答案是肯定的,請檢查doClear()函數。 – Vladut

+0

也嘗試替換$(「。select_type」)。change(function().... with $(document).on(「change」,「。select_type」,function()... – Vladut