jQuery函数无法正常工作

Question

我有两个jQuery函数，一个用于日期时间选择器

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<script type="text/javascript">
    $(document).ready(function () {         
        $("#txtDate").datepicker();
    });
</script>

另一个用于带复选框的Multiselect Dropdown / Listbox。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
    rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"</script>

<script type="text/javascript">
    $(document).ready(function () {
        $('[id*=lstFruits]').multiselect({
            includeSelectAllOption: true
        });
    });

而ASP代码为：

日期时间

<asp:TextBox ID="txtDate" runat="server" ></asp:TextBox>

下拉菜单

<asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple">
    <asp:ListItem Text="Mango" Value="1" />
    <asp:ListItem Text="Apple" Value="2" />
    <asp:ListItem Text="Banana" Value="3" />
    <asp:ListItem Text="Guava" Value="4" />
    <asp:ListItem Text="Orange" Value="5" />
</asp:ListBox>

我遇到的问题是，如果我将它们放入代码中，则只有日期时间选择器有效，而当我注释掉相应的日期时，多选下拉列表和多选下拉列表都无法正常工作，因此它们都无法一起工作时间选择器代码。

我无法弄清某些功能失调。

Answer 1

这是一个基于您在页面中引用的文件的工作示例，如果它基于HTML而不是ASPX，那么您将易于使用。

注意：-您引用了两个jquery版本，我评论了其中一个

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>!-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js">
</script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#txtDate").datepicker();
    $('[id*=lstFruits]').multiselect({
      includeSelectAllOption: true
    });
  });
</script>

请在这里找到完整的样本