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但没有结果

编辑：根据我的一些个人经验，我尝试了这个没有结果：

<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而只能使用类，因为ID是动态生成的，而不是每次都相同

Answer 1

你的脚本是正确的它适用于我，但仅适用于您需要将输入类型从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 2

我认为这是你的要求：

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

Answer 3

问题在于您的活动。实际上，您将更改事件绑定到隐藏的输入。所以它永远不会开火。

您应该在选择日期时执行操作。如果你正在使用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 4

实际上以下是有效的：

但我需要按值而不是最后一个孩子显示/隐藏。有什么帮助吗？

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();
     }
    });

Answer 5

此代码可以帮助您。我在您的网站（您之前提供的链接）中查看了此代码。这段代码有点破解以达到你的要求。

        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元素而不是select。

所以看看，让我知道。

如果日期值特定于jQuery

5 个答案: