Menu
The following code which targest ASP.NET MVC 4 works correctly on Firefox and Chrome (the page loads without error and the dropdown displays/responds correctly), however IE10 throws the following when the page loads:
> 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'chosen'
This is the SELECT html markup:
<select class="chzn-select" data-placeholder="Group" name="Group">
@foreach(var group in @Model.Groups)
{
<option value="@group">@group</option>
}
</select>
And the JavaScript below it:
<script type="text/javascript">
$(function () {
$(".chzn-select").chosen();
});
</script>
I have added the chosen.css and chosen.*.js files to the appropriate Style and Script bundles, which I then included in my master page.
(screen of dev tools on page request)
Also, I tried with select2 and it experienced the same error in IE, the other browsers worked fine. (I updated the bundles to include references to the .css and .js) The code I changed was:
<select class="GroupDropdown" name="Group">
@foreach(var group in @Model.Groups)
{
<option value="@group">@group</option>
}
</select>
<script type="text/javascript">
$(function () {
$(".GroupDropdown").select2();
});
</script>
The following works on all browsers (with the files in root and named correctly)
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Test</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="select2.js" type="text/javascript"></script>
<link href="select2.css" rel="stylesheet" />
</head>
<body>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</body>
<script type="text/javascript">
$(function(){
$("select").select2();
});
</script>
</html>
698
The plugin system allows you to easily customize Select2 to work exactly how you want it to. Allow users to type in a new option and add it on the fly . Support for both modern and legacy browsers is built-in, even including Internet Explorer 11.
The jQuery replacement for select boxes. Forums GitHub IRC Chat. Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. Select2 comes with support for RTL environments, searching with diacritics and over 40 languages built-in.
Using AJAX you can efficiently search large lists of items. Fully skinnable, CSS built with Sass and an optional theme for Bootstrap 4 . The plugin system allows you to easily customize Select2 to work exactly how you want it to.
On right click, select Add -> Client-Side Library. Here, just type in select2 and click Install. This imports the latest select2 Library into our application. Let’s start off by adding a very basic select control to the Index.chtml (Not Customers/Index.cshtml, the one at the Pages Folder.)
I had the same problem recently, ensure you are using a stable jquery version later than 1.8.1
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
