Question

编辑2和答案

好的，所以我将解释我是如何解决这个问题的，以防其他人遇到这样的问题。

jQuery（＆＃39; body＆＃39;）。delegate（jQuery（＆＃39;输入：radio [name = shipping_method]：选中＆＃39;），＆＃39;更改＆＃39;，function（） {

jQuery的委托功能接受参数＆＃39;＆gt;＆＃34; string＆＃34;，＆＃39; eventType＆＃39;＆gt;＆＃34; string＆＃34;，＆＃39;处理＆＃39;＆GT;＆＃34;功能＆＃34;

我的第一个参数被视为jQuery元素，而不是它所需的字符串。也许jQuery的错误处理程序以某种方式将其解析为字符串，并且导致对该div中的任何元素进行任何更改以引起对（＆＃39; input：radio ...）的回调，从而调用buildTimeSelect （）功能，让我很困惑！

所以最终，我所要做的就是改变jQuery（＆＃39;输入：无线电......）以简单地输入：无线电......

希望有人能够获得这个信息！

编辑：经过多次调查后，导致这种情况的原因是，当选择了一个时间时，更改会触发对buildTimeSelect（）函数的调用。在此函数中，立即在下拉列表中调用.empty（），因此数据为＆＃34; reset＆＃34;。

有没有办法防止这种情况发生，因此数据不会被重置？我知道我可以把.empty（）取出来，但是它会在下拉中留下所有其他时间，它会继续增长。

有什么建议吗？

我已经写了这个jQuery来创建一个2个选择框，显示一系列天数，并根据选择的日期，一段时间。

一切都运行良好，数据填充下拉列表，它是动态的，具体取决于选择的日期，除了当我尝试选择时间选择下拉列表中的一个选项时，它不允许我选择时间。

所有时间戳都在那里，但是当我尝试点击特定时间时，它会恢复到列表中的第一个选项。

jQuery.noConflict();

function toggleShippingCheck() {
    toggleDelivery(jQuery('input:radio[name=shipping_method]:checked').val());
}

function isShippingValueDelivery(shippingValue) {
    if (shippingValue == 'flatrate_flatrate' || shippingValue == 'shipping') {
        return true;
    }
}

function isShippingValuePickup(shippingValue) {

    if (shippingValue == 'freeshipping_freeshipping') {
        return true;
    }

}

function toggleDelivery(currentSelectedShipping) {
    if (isShippingValueDelivery(currentSelectedShipping)) {
        jQuery('#time-to-pickup').hide();
        jQuery('#time-to-delivery').show();
        jQuery('#future_shipping_options').show();
        jQuery('#future_order_pickup_times').hide();
        jQuery('#future_order_delivery_times').show();
    //show extra fee
    jQuery('#extra_fee_section').show();
} else if (isShippingValuePickup(currentSelectedShipping)) {
    jQuery('#time-to-delivery').hide();
    jQuery('#time-to-pickup').show();
    jQuery('#future_shipping_options').show();
    jQuery('#future_order_pickup_times').show();
    jQuery('#future_order_delivery_times').hide();

    //hide delivery extra fee
    jQuery('#extra_fee_section').hide();
}
}


jQuery(document).ready(function () {
jQuery('body').delegate('#future-order-day', 'change', function () {
    buildTimeSelect(jQuery(this).val());
});

jQuery('body').delegate(jQuery('input:radio[name=shipping_method]:checked'), 'change', function () {
    buildTimeSelect(jQuery('#future-order-day').val());
});

function buildTimeSelect(epochTime) {

    var pickupJson = jQuery.parseJSON(jQuery('#pickup-times').text());
    var deliveryJson = jQuery.parseJSON(jQuery('#delivery-times').text());
    var selectJson;


    var shippingValue = jQuery('input:radio[name=shipping_method]:checked').val();

    if (isShippingValueDelivery(shippingValue)){
        selectJson = deliveryJson;
    } else {
        selectJson = pickupJson;
    }

    //empty out time select
    jQuery('#future-order-time').empty();
    jQuery.each(selectJson.days, function (key, value) {
        if (value.epochTimeID == epochTime) {

            //with each time, populate it with values that match the epoch time
            jQuery.each(value.times, function (key, value) {
                jQuery('#future-order-time')
                    .append(jQuery("<option></option>")
                        .attr("value", value.epochTime)
                        .text(value.time));
            });
        }
    });

}

//when shipping method changes
jQuery('body').delegate('input[name="shipping_method"]:radio', 'change', function () {
    toggleDelivery(jQuery(this).val());
});

//select other amount radio when extra fee input is in focus
jQuery('body').delegate('#extra_fee_amount', 'focus', function () {
    jQuery('#percent_selected_other').prop('checked', true);
});

//if tip is set to none fill the input with 0
jQuery('body').delegate('input[name="percent_selected"]:radio', 'change', function () {
    if (jQuery(this).val() == 0) {
        jQuery('#extra_fee_amount').val(0);
    }
    });
});

的jQuery（＆＃39;＃未来阶时间＆＃39）空（）;每次选择新时间并清除/重置输入时都会调用。我无法弄清楚.empty（）调用的位置，以便每次选择时都不会清除输入。

以下是div id的相应HTML / PHP

 <div id="future-order-section">
<div>
    <em><b>OR, you may select a future time:</b></em>
</div>

<?php if ($this->enableFutureOrder() == true): ?>
        <div id="future_shipping_options" style="display:none">
            <div id="future_order_pickup_times">
                Times available for future order pickup
                <!--Pickup JSON-->
                <p id="pickup-times" style="display:none"><?php echo $this->pickupTimesJSON(); ?></p>
            </div>
            <div id="future_order_delivery_times">
                Times available for future order delivery
                <!--Delivery JSON-->
            <p id="delivery-times" style="display:none"><?php echo $this->deliveryTimesJSON(); ?></p>
            </div>
            <div>
                <label>Select Date</label>
                <?php echo $this->buildHTMLSelectForPickupAndDeliveryDays(); ?>
            </div>
            <div>
                <label for="future-order-time">Select Time</label>
                <select id="future-order-time" class="future-order" name="future-order-time"></select>
            </div>
        </div>
<?php endif; ?>
</div>

感谢您阅读

jQuery时间选择功能不允许选择下拉列表中的选项

0 个答案: