Question

提前感谢您提供的任何帮助。

我有一个带有日期选择器的表单，所以如果你单击输入框，会弹出一个漂亮的日历。单击日历中的特定日期，然后在输入框中填写日期。

接下来，我有一个用于选择时间的输入框。根据星期几，时间列表会发生变化。例如，如果您选择星期五，则仅显示上午10点至下午1点的选项。

我只在firefox中使用它。在IE和Safari上，如果您选择周五，它将显示上午9点至下午6点，这是默认值。看起来hide（）不起作用。

我没有在IE或Safari的开发者工具中看到任何错误消息。

这是HTML：

<input alt="date" type="text" name="formfield_day" id="formfield_day"  />

<select name="formfield_time" id="formfield_time" class="ri_field">
    <option value="0" selected="selected">Time</option> 

            <option value="9 am" id="time9">9:00 AM</option>
            <option value="10 am" id="time10">10:00 AM</option>
            <option value="11 am" id="time11">11:00 AM</option>
            <option value="12 pm" id="time12">12:00 PM</option>
            <option value="1 pm" id="time1">1:00 PM</option>
            <option value="2 pm" id="time2">2:00 PM</option>
            <option value="3 pm" id="time3">3:00 PM</option>
            <option value="4 pm" id="time4">4:00 PM</option>
            <option value="5 pm" id="time5">5:00 PM</option>
            <option value="6 pm" id="time6">6:00 PM</option>

 </select>

这是javascript：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script>
$(document).ready(function(){

    $("#formfield_day").datepicker({ 
     beforeShowDay: nonWorkingDates,
    minDate: 0, 
    maxDate: "+2m" 
    });

  });
</script>


<script>
        $( document ).ready(function() {
            changeTime();
        });

        $('#formfield_day').bind('change', function(event) {
            changeTime();  
        });

        function changeTime() {

    //  var x = $('#formfield_day').val();

        var currentDate = $( "#formfield_day" ).datepicker( "getDate" );


        var weekday = new Array(7);
        weekday[0]=  "Sunday";
        weekday[1] = "Monday";
        weekday[2] = "Tuesday";
        weekday[3] = "Wednesday";
        weekday[4] = "Thursday";
        weekday[5] = "Friday";
        weekday[6] = "Saturday";

        if (currentDate) {
        var dayName = weekday[currentDate.getDay()]; 

        hideAll();

        if (dayName == "Tuesday") {
            hideAll();
                $('#time1').show();
                $('#time2').show();
                $('#time3').show();
                $('#time4').show();
                $('#time5').show();
                $('#time6').show();
            }



            else if (dayName == "Friday") {
            hideAll();
                $('#time9').show();
                $('#time10').show();
                $('#time11').show();
                $('#time12').show();

            }
        }}

        function hideAll() {            
            $('#time1').hide();
            $('#time2').hide();
            $('#time3').hide();
            $('#time4').hide();
            $('#time5').hide();
            $('#time6').hide();
            $('#time7').hide();
            $('#time8').hide();
            $('#time9').hide();
            $('#time10').hide();
            $('#time11').hide();
            $('#time12').hide();
        }

</script>

有什么想法吗？我很感激有助于追踪这个错误。

Answer 1

尝试使用

隐藏：

  $('#time1').css("display","none");

SHOW：

  $('#time1').css("display","block");

Answer 2

我相信您正在尝试隐藏选项中的选项可能不是最好的方法，尝试为一周中的每一天创建一个选项并相应地显示它们：

else if (dayName == "Friday") {
            hideAll(); // hide all the selects
                $('#fridaySelect').show(); // only shows friday select with all its valid options

jquery hide（）没有在IE＆amp; Safari，在FF工作

2 个答案: