选择-select 未在 document.ready 内启动。无法重置选择-select
chosen-select not initiating within document.ready. Unable to reset chosen-select
我有一个示例列表,我正在使用 javascript 选择的插件。
在我看过的所有教程中,它们都是在 $(document).ready 函数中启动的,但是每当我尝试这样做时,它都会给我一个错误:
"Uncaught type error...chosen is not a function".
如果我在它之外启动,它工作正常..
下一个问题是如果我尝试使用 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>
尝试改变这个:
<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>
如果可行,我可以详细说明哪里出了问题,以及什么对您来说可能是更简洁的解决方案。让我知道进展如何。
我有一个示例列表,我正在使用 javascript 选择的插件。
在我看过的所有教程中,它们都是在 $(document).ready 函数中启动的,但是每当我尝试这样做时,它都会给我一个错误: "Uncaught type error...chosen is not a function".
如果我在它之外启动,它工作正常..
下一个问题是如果我尝试使用 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>
尝试改变这个:
<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>
如果可行,我可以详细说明哪里出了问题,以及什么对您来说可能是更简洁的解决方案。让我知道进展如何。