Question

我正在开发一个MVC 5应用程序，我有一些下拉列表和一个日期选择器。我编写了一个jquery函数来隐藏/显示下拉列表中的项目，具体取决于所选内容，它似乎阻止了下拉日历的显示。知道为什么会这样做吗？

以下是我的日期选择器的代码

 @{DateTime create_Date = (DateTime)Model.Create_Date;
   string createDate = create_Date.ToString("yyyy-MM-dd");}
 <input class="datefield" data-val="true" data-val-required="@Rxcs.Date_is_Req"
 id="Create_Date" name="Create_Date" type="datetime" value="@createDate" min="@DateTime.MinValue" max="@DateTime.Now.Date.ToString("yyyy-MM-dd")" />

以下是我的jquery函数。

<script type="text/javascript">

$(document).ready(function () {
    var roleList = document.getElementById("Role_ID");
    var orgList = document.getElementById("Organization_ID");

    // Hide/show the AAC roles
    roleList.addEventListener("click", function () {
        if ($("#Organization_ID option:selected").text() != "AAC") {
            $("#Role_ID").find('option[value=2]').hide();     //  2 - AAC Member
            $("#Role_ID").find('option[value=9]').hide();     //  9 - AAC BoD
            $("#Role_ID").find('option[value=12]').hide();    // 12 - AAC Treasurer
            $("#Role_ID").find('option[value=16]').hide();    // 16 - AC Committee
            $("#Role_ID").find('option[value=17]').hide();    // 17 - DC Committee
            $("#Role_ID").find('option[value=19]').hide();    // 19 - AAC System Administrator
            $("#Role_ID").find('option[value=22]').hide();    // 22 - AAC Administrator
        }
        else
        {
            $("#Role_ID").find('option[value=2]').show();     //  2 - AAC Member
            $("#Role_ID").find('option[value=9]').show();     //  9 - AAC BoD
            $("#Role_ID").find('option[value=12]').show();    // 12 - AAC Treasurer
            $("#Role_ID").find('option[value=16]').show();    // 16 - AC Committee
            $("#Role_ID").find('option[value=17]').show();    // 17 - DC Committee
            $("#Role_ID").find('option[value=19]').show();    // 19 - AAC System Administrator
            $("#Role_ID").find('option[value=22]').show();    // 22 - AAC Administrator
        }
    }, false);

    ReadyList();
});
</script>

此外，似乎整个节目/隐藏项目都不起作用，除非我在那里调用ReadyList（）函数（此页面上没有ReadyList函数，它是来自另一页面的剩余代码。）

Answer 1

我通过将此函数添加到我的脚本部分并将我的日期字段的类重命名为日期选择器来修复它

$(function () {
    // This will make every element with the class "date-picker" into a DatePicker element
    $('.date-picker').datepicker({dateFormat: 'yy-mm-dd'});
})

Jquery打破了我的日期选择器

1 个答案: