Hi,
I am rather rather new to coding, specially web.
I came across Select2 a while ago and found it very interesting in what i had to do.
However, i encountered some difficulties.
I have a simple select2 in my code in form of a dropdownlist which is found in an updatepanel.
I have bound my dropdownlist to a database and i can select records as desired.
However, when the page loads and it retrieves data from the database, it needs to select at times several items from the dropdownlist at page load.
Here is what I have been able to do till now:
Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript">
$(function () {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(){
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [';'],
closeOnSelect: true,
placeholder: "Choose",
multiple: true,
autoClear: false
});
$("#ddl1").on("select2:select select2:unselect select2:change", function (e) {
//this returns all the selected item
var items = $(this).val();
//Gets the last selected item
var lastSelectedItem = e.params.data.id;
alert("Selected value is: " + items);
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="ddl1" Width="300px" runat="server" CssClass="form-control js-example-tokenizer" ToolTip="Select ">
<asp:ListItem Text="Alice Mutton" Value="Alice Mutton"></asp:ListItem>
<asp:ListItem Text="Aniseed Syrup" Value="Aniseed Syrup"></asp:ListItem>
<asp:ListItem Text="Boston Crab Meat" Value="Boston Crab Meat"></asp:ListItem>
<asp:ListItem Text="Camembert Pierrot" Value="Camembert Pierrot"></asp:ListItem>
<asp:ListItem Text="Carnarvon Tigers" Value="Carnarvon Tigers"></asp:ListItem>
<asp:ListItem Text="Chai" Value="Chai"></asp:ListItem>
<asp:ListItem Text="Chang" Value="Chang"></asp:ListItem>
<asp:ListItem Text="Chartreuse verte" Value="Chartreuse verte"></asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script>
function invokeButtonClick() {
$('#ddl1').val(["Chartreuse verte", "Chang"]);
$('#ddl1').trigger("change");
}
</script>
</form>
</body>
</html>
Default.aspx.vb
Private Sub form1_Load(sender As Object, e As EventArgs) Handles form1.Load
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "InvokeButton", "invokeButtonClick();", True)
End Sub
In spite of selecting 2 items to be selected, it only selects the first item.
Also, when an item is selected automatically at page load it does not trigger the on select function to give an alert of the selectected items.
Can you help please?