堆棧內存溢出
  簡體   English   中英

selected-select不在document.ready中啟動。 無法重置選擇的選擇

[英]chosen-select not initiating within document.ready. Unable to reset chosen-select

 原文  2018-11-09 12:51:31  1   1    jquery/ html/ jquery-chosen

問題描述

我有一個示例列表，上面使用了javascript選擇的插件。

在我見過的所有教程中，它們都是在$（document）.ready函數中啟動選擇的，但是每當我嘗試這樣做時，都會給我一個錯誤：“未捕獲的類型錯誤...選擇的不是函數”。

如果我在外面啟動，它會正常工作。

下一個問題是，如果我嘗試使用val（“”）。trigger（“ chosen：updated”）重置列表，它什么也不做。

我的代碼如下： 

         <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    </asp:Content>


        <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">


            <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">


            <select class="chosen-select" data-placeholder="Search for Numbers" style="width: 300px; height: 20px">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
            <button id="btn">click me to reset</button>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('.chosen-select').chosen();
                });


                $("#btn").click(function () {
                    console.log("Button Clicked To Reset");
                    $('.chosen-select').val("").trigger("chosen:updated");
                    $('.chosen-select').val("").trigger("liszt:updated");

                });

            </script>
        </asp:Content>

我在犯一些簡單的錯誤嗎？ 它可能正在加載jQuery或選擇多數民眾贊成在造成問題？

任何幫助，將不勝感激。

呈現的HTML： 

    <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>



</title>

    <script src='/Scripts/common.js'                       type="text/javascript"></script>  
    <script src='/Scripts/jquery-1.4.1-vsdoc.js'           type="text/javascript"></script>
    <script src='/Scripts/jquery-1.7.1.min.js'             type="text/javascript"></script>
    <script type="text/javascript">
        var jq171 = jQuery.noConflict();
    </script>
    <script src='/Scripts/jquery.validate.min.js'          type="text/javascript"></script>
    <script src='/Scripts/MicrosoftAjax.js'                type="text/javascript"></script>
    <script src='/Scripts/MicrosoftMvcAjax.js'             type="text/javascript"></script>
    <script src='/Scripts/MicrosoftMvcValidation.debug.js' type="text/javascript"></script>
    <script src='/Scripts/js.cookie.js'                    type="text/javascript"></script>
    <script src='/Scripts/breadcrumb-messageSender.js'  type="text/javascript"></script>

    <link id="Link1" href="../Content/Site.css" rel="stylesheet" type="text/css" /><link id="Link2" href="../Content/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" /><link id="Link3" href="../Content/jquery.ui.theme.css" rel="stylesheet" type="text/css" /><link id="Link4" href="../Content/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /><link id="Link5" href="../Content/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" /><link id="Link7" href="../Content/Icons/scss/font-awesome.css" rel="stylesheet" type="text/css" /><link id="Link6" href="../Content/Styles/eps-site.css" rel="stylesheet" type="text/css" /><link type="text/css" href="/Content/TelerikStyles/telerik.common.min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/TelerikStyles/telerik.telerik.min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/Styles/eps-telerik-grid.css" rel="stylesheet"/>


    <!--Hayri-->
    <script src='/Scripts/EpsUtils.js' type="text/javascript"></script>


    <script type="text/javascript">
        addExpanderEventHandlers(null);
    </script>
</head>

<body>
    <div class="page">



  <script src="https://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">



    <select  class="chosen-select" data-placeholder="Search for Numbers" style="width: 300px; height: 20px" >
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>


    <button id="btn">click me to reset</button>
    <script type="text/javascript">


        $(document).ready(function () {
          $('.chosen-select').chosen();
        });




        $("#btn").click(function () {
      console.log("Button Clicked To Reset");
      $('.chosen-select').val("").trigger("chosen:updated");
      $('.chosen-select').val("").trigger("liszt:updated");

        });
    </script>


    </div>

    <!-- This should be exact sequence for scripts -->
    <script type="text/javascript" src="/Scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.2.1.custom.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.datepicker.js"></script>
 <!--this one has jquery-1.4.2.min.js-->
</body>
</html>

1 個解決方案

解決方案1
 0 已采納  2018-11-09 13:19:05

嘗試更改此： 

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

在此： 

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<script type="text/javascript">
        var jq183 = jQuery.noConflict();
</script>

並更改此： 

$(document).ready(function () {
    $('.chosen-select').chosen();
});

$("#btn").click(function () {
    console.log("Button Clicked To Reset");
    $('.chosen-select').val("").trigger("chosen:updated");
    $('.chosen-select').val("").trigger("liszt:updated");
});

在此： 

<script type="text/javascript">
    jq183(document).ready(function () {
      jq183('.chosen-select').chosen();

      jq183("#btn").click(function () {
        console.log("Button Clicked To Reset");
        jq183('.chosen-select').val("").trigger("chosen:updated");
        jq183('.chosen-select').val("").trigger("liszt:updated");
      });
    });
</script>

如果可行，我可以詳細說明出現問題的地方以及對您而言更清潔的解決方案。 讓我知道事情的后續。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery selected-select防止隱藏select ng-repeat for selected-select無法正常工作 在helpers方法欄上添加selected-select CLASS =“選擇選擇”的相關選擇 Rails 4-nested_form和selected-select 選擇選擇倍數上的觸發功能 jQuery MVC無法使用selected-select下拉列表 關於選擇的Twitter引導工具提示不起作用 選擇的jQuery驗證與Bootstraps選擇的沖突 如何重置我的許多選擇框值？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM