دمج الصور في القائمة المنسدلة Jquery عليها

هذا المثال يوضح كيفية انشاء قائمة منسدلة , يتم اضافة في داخل صور بجانب النص .

في البداية ستكون لدينا قاعدة بيانات تحتوي على جدول .

الجدول يحتوي على البيانات التالية .

يحتوي التطبيق على قاعدة بيانات يمكنك استخدمها بعد القيام بعملية استعادة لها , لتعرف كيفية الاستعادة شاهد الموضوع كيفية استعادة قاعدة البيانات , يحتوي على المجلد msdropdown يحتوي على الملفات جافا سكربت تستخدم لاضافة وتنسيق وانشاء التأثير الحركي عليها , وهناك مجلد الصور الذي يحتوي على الأعلام المختلفة .

تصميم الصفحة

كود المصدر للصفحة

كما تشاهد في البداية Head يحتوي على ملفات السكربت Jquery وكذلك ملف CSS

 <head runat="server">
        <title>Untitled Page</title>
 
        <script src="msdropdown/js/jquery-1.6.1.min.js" type="text/javascript"></script>
        <script src="msdropdown/js/jquery.dd.js" type="text/javascript"></script>
        <link href="msdropdown/dd.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" language="javascript">
    $(document).ready(function(e) {
    try {
    $("#ddlCountry").msDropDown();
    } catch (e) {
    alert(e.message);
    }
    });
    </script>
        
    </head>
    <body style="font-weight: 700">
        <form id="form1" runat="server">
        <div>
        
            <table align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td height="30">
                 <b style="text-align: center"> دمج صور داخل القائمة المنسدلة</b></td>
                </tr>
                <tr>
                  <td height="40">
                  <asp:DropDownList ID="ddlCountry" runat="server" AutoPostBack="True" 
                    onselectedindexchanged="ddlCountry_SelectedIndexChanged" Width="200px">
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td height="30">
                     <asp:Label ID="lblMsg" runat="server" ForeColor="Red"></asp:Label>
                    </td>
                </tr>
            </table>
        </div>
</form></body>
</head>

كود البرمجة للصفحة

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDropDownlist();
            BindTitles();
            lblMsg.Text = ddlCountry.Items[0].Text;
        
        }
    }
    protected void BindTitles()
    {
        if (ddlCountry != null)
        {
            foreach (ListItem Li in ddlCountry.Items)
            {
                Li.Attributes[&quot;title&quot;] = &quot;Images/&quot; + Li.Value;
 
            }
        }
    }
    protected void BindDropDownlist()
    {
     SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings
     [&quot;Country&quot;].ToString());
      if (conn.State != ConnectionState.Open)
            conn.Open();
        SqlDataAdapter da = new SqlDataAdapter(&quot;Select * from Country&quot;, conn);
        DataTable dt = new DataTable();
        da.Fill(dt);
        ddlCountry.DataTextField = &quot;CountryName&quot;;
        ddlCountry.DataValueField = &quot;CountryImage&quot;;
        ddlCountry.DataSource = dt;
        ddlCountry.DataBind();
        conn.Close();
    }
    protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
    {
        lblMsg.Text = ddlCountry.SelectedItem.Text;
        BindTitles();
    }
}