隱藏選擇值，如果日期值是特定使用jQuery

Question

我有以下代碼：

<div class="product-field product-field-type-D"> 
    <span class="product-fields-title-wrapper"> 
     <span class="product-fields-title"><strong>Delivery date</strong></span> 
    </span> 
    <span class="product-field-display"> 
    <span class="product_custom_date"> 
    <input class="datepicker-db" id="customProductData.140.7." type="hidden" name="customProductData[140][7]" value=""> 
    <input id="customProductData.140.7._text" class="datepicker hasDatepicker" type="text" value="-Ποτέ-"> 
    <span class="vmicon vmicon-16-logout icon-nofloat js-date-reset"></span></span></span> 
</div> 

<div class="product-field product-field-type-S"> 
    <span class="product-fields-title-wrapper"> 
    <span class="product-fields-title"><strong>Delivery hour</strong></span> 
    </span> 
    <span class="product-field-display"> 
    <select id="customProductData_140_662" name="customProductData[140][8][662]" class="vm-chzn-select chzn-done" style="display: none;"> 
    <option value="08.00-08.30">08.00-08.30</option> 
    <option value="08.30-09.00">08.30-09.00</option> 
    <option value="09.00-09.30">09.00-09.30</option> 
    <option value="09.30-10.00">09.30-10.00</option> 
    <option value="10.00-10.30">10.00-10.30</option> 
    <option value="10.30-11.00">10.30-11.00</option> 
    <option value="11.00-11.30">11.00-11.30</option> 
    <option value="11.30-12.00">11.30-12.00</option> 
    <option value="12.00-12.30">12.00-12.30</option> 
    <option value="12.30-13.00">12.30-13.00</option> 
    </select> 
    <div id="customProductData_140_662_chzn" class="chzn-container chzn-container-single" style="width: 200px;"> 
    <a href="javascript:void(0)" class="chzn-single" tabindex="-1"><span>08.00-08.30</span><div><b></b></div></a> 
    <div class="chzn-drop" style="left: -9000px; width: 198px; top: 25px;"> 
    <div class="chzn-search"> 
    <input type="text" autocomplete="off" tabindex="-1" style="width: 163px;"> 
    </div> 
    <ul class="chzn-results"> 
    <li id="customProductData_140_662_chzn_o_0" class="active-result result-selected" style="">08.00-08.30</li> 
    <li id="customProductData_140_662_chzn_o_1" class="active-result" style="">08.30-09.00</li> 
    <li id="customProductData_140_662_chzn_o_2" class="active-result" style="">09.00-09.30</li> 
    <li id="customProductData_140_662_chzn_o_3" class="active-result" style="">09.30-10.00</li> 
    <li id="customProductData_140_662_chzn_o_4" class="active-result" style="">10.00-10.30</li> 
    <li id="customProductData_140_662_chzn_o_5" class="active-result" style="">10.30-11.00</li> 
    <li id="customProductData_140_662_chzn_o_6" class="active-result" style="">11.00-11.30</li> 
    <li id="customProductData_140_662_chzn_o_7" class="active-result" style="">11.30-12.00</li> 
    <li id="customProductData_140_662_chzn_o_8" class="active-result" style="">12.00-12.30</li> 
    <li id="customProductData_140_662_chzn_o_9" class="inactive-result active-result" style="">12.30-13.00</li></ul></div></div> 
    </span> 
</div> 

，我想如果從交貨日期字段日期等於特定日期，然後隱藏交貨時間的最後一個值字段（12.30-13.00）。這可能與jQuery的？

我試圖按照從這裏例如：hide option select value based on option value selected on first options，但沒有結果

編輯：從我的一些個人經驗，我想這沒有結果的。我不能使用項目的id

<script> 
$(document).ready(function(){ 
     $('.datepicker-db').on('change',function() { 
      if($(this).val()== '30.04.2016'){ 
       $('.vm-chzn-select option[value="12.30-13.00"]').hide(); 
      } 
      else{ 
       $('.vm-chzn-select option[value="12.30-13.00"]').show(); 
      } 
     }); 
    }); 
    </script> 

公告但只有類，因爲ID動態生成，並且每次都不一樣

Answer 1

此代碼將幫助您。我在你的網站上檢查過這個代碼（你之前提供的這個鏈接）。這段代碼可以實現你的要求。

 function getElement(bHide){ 
     var timeStr = "12.30-13.00"; 
     var ele = jQuery('.vm-chzn-select option[value="'+timeStr+'"]').closest("select").siblings("div.chzn-container").find("ul>li"); 
     for(var index=0;index<ele.length;index++){ 
      if(jQuery(ele[index]).html() == timeStr) 
      { 
       if(bHide) 
        jQuery(ele[index]).hide(); 
       else 
        jQuery(ele[index]).show(); 
      } 
     } 
    } 

    jQuery(".datepicker").datepicker().data("datepicker").settings["onSelect"] = function() { 
     if (jQuery(this).val() == '30/04/2016') 
     { 
      getElement(true); 
     } else { 
      getElement(false); 
     } 
    } 

其實在上面的代碼中，我寫了一個函數來確定哪些要隱藏，因爲下拉您使用是UL-li元素，而不是選擇的元素。

所以看看，讓我知道。

Answer 2

我認爲這是您的要求：

if(condition for specific date) { 
    $('.vm-chzn-select option[value="12.30-13.00"]').hide(); 
} 

Answer 3

你的腳本是正確的 這對我的作品，但只有在一個情況是，你需要從hidden改變你的輸入類型text象下面這樣：

<input class="datepicker-db" id="customProductData.140.7." type="hidden" name="customProductData[140][7]" value=""> 

變化

<input class="datepicker-db" id="customProductData.140.7." type="text" name="customProductData[140][7]" value=""> 

希望它適合你:)

Answer 4

問題是與您的事件。實際上，你將更改事件綁定到隱藏的輸入。所以它永遠不會開火。

您應該執行選擇日期的操作。如果你使用的是jQuery datepicker，那麼使用下面的代碼並檢查你的條件並隱藏元素。

$("#customProductData.140.7._text").datepicker({ 
    onSelect: function(){ 
     if($(this).val() == '30.04.2016') 
     { 
       $('.vm-chzn-select option[value="12.30-13.00"]').hide(); 
     } else{ 
       $('.vm-chzn-select option[value="12.30-13.00"]').show(); 
     } 
    } 
}); 

可能會對您有所幫助。如果您仍然面臨任何問題，請讓我知道。

Answer 5

實際上是工作如下：

，但我需要證明的價值/隱藏，而不是由最後一個孩子。任何幫助？

jQuery(".datepicker").change(function() { 
    var val = jQuery(this).datepicker().val(); 
    console.log(val); 
     if (val == '30.04.2016') { 
     console.log("hide"); 
     jQuery(".chzn-drop li:last-child ").hide(); 
    } else { 
     console.log("show"); 
     jQuery(".chzn-drop li:last-child ").show(); 
    } 
    });