برای این کار باید jquery.ddslick.min.js را در راه حل خود داشته باشم.
کد زیر aspx من است:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryImagesInDropDown.Default" %>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title>jQuery: Showing Images in Drop Down List</title>
- <script src="Scripts/jquery-2.1.4.min.js"></script>
- <script src="Scripts/jquery.ddslick.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function () {
- var ddlData = [
- {
- text: "Facebook",
- value: 1,
- description: "Facebook",
- imageSrc: "Social/facebook.png"
- },
- {
- text: "Twitter",
- value: 2,
- description: "Twitter",
- imageSrc: "Social/twitter.png"
- },
- {
- text: "LinkedIn",
- value: 3,
- description: "LinkedIn",
- imageSrc: "Social/linkedin.png"
- },
- {
- text: "Google+",
- value: 3,
- description: "Google+",
- imageSrc: "Social/GooglePlus2.jpg"
- },
- {
- text: "c-SharpCorner",
- value: 4,
- description: "A Community For Professional",
- imageSrc: "Social/cSharp.png"
- }
- ];
- $('#ddlSocial').ddslick({
- data: ddlData,
- width: 300,
- imagePosition: "left",
- onSelected: function (selectedData) {
- //Write your logic on Selection index change.
- }
- });
- });
- </script>
- </head>
- <body>
- <form id="form1">
- <div>
- <div id="ddlSocial"></div>
- </div>
- </form>
- </body>
- </html>
تصویر و اسکریپت زیر در راه حل من است:
شکل 1 .
اکنون برنامه را اجرا کنید:
شکل 2 .
شکل 3 .
هر موردی را انتخاب کنید
شکل 4 .
شکل 5 .