Description:-
In this example we explain that how to Add or Insert
Items in List box using JavaScript or query in asp.net. Or how to add or Insert
Items in list box at client side without postbox.
Here we have one tax box and one add button. When
any item enter in textbox and click on add button then this items are inserted
to the list box at client side without post back using JavaScript/query.
How to add /insert Items to ASP.Net List Box at
client side using JavaScript and query. The value from the Textbox will be
added to the ASP.Net List Box control using JavaScript and query.
Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="listbox.aspx.cs" Inherits="listbox" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
//Using
Jquery
$(function () {
$("[id*=btnAddjq]").bind("click", function () {
var value = $("[id*=txtitem]").val();
var lstgame = $("[id*=lstgame]");
var option = $("<option
/>").val(value).html(value);
lstgame.append(option);
$("[id*=txtitem]").val("");
return false;
});
});
//Using
Javascript
function AddItemsToListbox() {
var txtitem = document.getElementById("<%=txtitem.ClientID %>");
var lstgame = document.getElementById("<%= lstgame.ClientID%>");
var option = document.createElement("OPTION");
option.innerHTML = txtitem.value;
option.value = txtitem.value;
lstgame.appendChild(option);
txtitem.value = "";
return false;
}
</script>
<title>How to Add/Insert Textbox Values to Listbox using
javascript/jquery.</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ListBox ID="lstgame" runat="server" Width="200" Height="100" SelectionMode="Multiple"></asp:ListBox>
<br />
<hr />
<asp:TextBox ID="txtitem" runat="server" />
<asp:Button ID="btnAddjs" Text="Add using Javascript" runat="server" OnClientClick="return
AddItemsToListbox()" />
<asp:Button ID="btnAddjq" Text="Add using Jquery" runat="server" />
</form>
</body>
</html>
0 comments:
Post a Comment