隐藏选择值，如果日期值是特定使用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(); 
    } 
    });