如何利用img和div标签实现图像下拉列表的模拟

本篇内容主要讲解“如何利用img和div标签实现图像下拉列表的模拟”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何利用img和div标签实现图像下拉列表的模拟”吧!

dropdownlist本身不支持图像列表，那么我们利用jquery来实现下拉列表的模拟。

如图

其实很简单，不用自定义控件之类，因为我们在mvc下不能使用asp.net服务器控件，所以我们只用了div和img标签实现这个功能

1.首先介绍一下数据库表结构，这是下拉列表用到的数据

用到的表

2.创建 company，department的录入窗体

如下图，因为不是重点，不再介绍，只要注意一点，company.id为自增int，注意属性窗口中auto Generated Value为true，Auto-Sync为OnInsert，这样linq才可没错

[AcceptVerbs(HttpVerbs.Post)]  public ActionResult CreateCompany(string name, string brief)  {  string strResult = "失败";  ServiceDataContext db = new ServiceDataContext();  Company com = new Company();  com.Name = name;  com.Brief = brief;  try {  db.Companies.InsertOnSubmit(com);  db.SubmitChanges();  strResult = "成功";  }  catch {  strResult = "失败，名称重复？";  }  return Json(strResult);  }

3.设计下拉菜单（这才是我想说的重点）

<td>                     <img id="imgDefault" src='' class="imgCss" alt="" /><img

•                        id="imgArrow" src="<%=ViewData["arrowUrl"]%>" class="DropdownCss" alt="" />

•                    <div id="divList" class="scrolldivHidden">

•                        <%=ViewData["imageTable"]%>div>

•                    <%=Html.Hidden("head") %>

•                td>

这里selectedUrl为选择的图像，有默认值，arrowUrl为下拉图标，ViewData["imageTable"]是下拉列表框

这里用到的css

.Visible  {      visibility: visible;      display: block;  }  .Hidden  {      visibility: hidden;      display: none;  }  .imgCss  {      cursor: hand;      width: 18px;      height: 18px;      border: 1px solid #c3c3c3;  }  .DropdownCss  {      cursor: hand;      width: 9px;      height: 9px;      vertical-align: top;  }  .scrolldivHidden  {      position:absolute;      width: 36px;      height: 50px;      z-index: 1;      left: 0px;      top: 0x;      overflow-y: auto;      overflow-x:hidden;      display:none;  }  .scrolldivVisible  {      position:absolute;      width: 36px;      height: 50px;      z-index: 1;      left: 0px;      top: 0x;      overflow-y: auto;      overflow-x:hidden;      display:block;  }

主要我们用到jquery来实现选择等功能

这里用到jquery一个选择框的插件

/*  * Manipulation for HTML SELECT with jQuery  * Created by Baldwin (http://www.dnnsun.com)  * version: 1.0 (02/03/2009)  * @requires jQuery v1.2 or later  */ ; (function($) {      /* Clear all options */     $.fn.clearSelect = function() {          return this.each(function() {              if (this.tagName == 'SELECT') this.options.length = 0;          });      }       /* Fill the options with the object array: [{'Text':'Hello','Value':'1'}]*/     $.fn.fillSelect = function(data) {          return this.clearSelect().each(function() {              if (this.tagName == 'SELECT') {                  var dropdownList = this;                  if (data && data.length > 0) {                      $.each(data, function(index, optionData) {                          var option = new Option(optionData.Text, optionData.Value);                           if ($.browser.msie)                              dropdownList.add(option);                          else                             dropdownList.add(option, null);                      });                      dropdownList.disabled = false;                  }                  else                     dropdownList.disabled = true;              }          });      }       /* loading when applying Ajax fillSelect */     $.fn.loadSelect = function(loadText) {          var data = [{ 'Text': loadText, 'Value': ''}];          this.fillSelect(data);      }       /* selected the target option with value */     $.fn.selected = function(value) {          return this.each(function() {              if (this.tagName == 'SELECT') {                  var options = this.options;                  if (options.length > 0) {                      $.each(options, function(index, optionData) {                          // once match then exist loop                          if (optionData.value == value) {                              optionData.selected = true;                              return false;                          }                      });                  }              }          });      }       /* TODO:selected the target option with text */     $.fn.selectedText = function(text) {          return this.each(function() {              if (this.tagName == 'SELECT') {                  var options = this.options;                  if (options.length > 0) {                      $.each(options, function(index, optionData) {                          // once match then exist loop                          if (optionData.text == text) {                              optionData.selected = true;                              return false;                          }                      });                  }              }          });      }       /* returns the selected value */     $.fn.getSelected = function() {          return $(this).val();      }       /* return the text of selected option */     $.fn.getSelectedText = function() {          return $(this).children("[@selected]").text();      }  })(jQuery);       function getDepartment(data) { $("#department").fillSelect(data); }   $("#company").change(function() {                  $.getJSON("GetDepartment?company=" + $("#company").val(), null, getDepartment);              });

实现了联动框

下面的代码实现了下拉和选择功能

 $("#imgArrow,#imgDefault").toggle(function() {  $("#divList").css("left", $("#imgDefault").css("left"));  $("#divList").slideToggle("fast");  }, function() {  $("#divList").css("left", $("#imgDefault").css("left"));  $("#divList").slideToggle("fast");  });  $("#head").val($("#imgDefault").attr("src"));  $("img:.imgList").click(function() {  $("#imgDefault").attr("src", $(this).attr("src"));  $("#divList").slideToggle("fast");  $("#head").val($("#imgDefault").attr("src"));  }).hover(function() {  $(this).removeClass().addClass("alpha");  }, (function() {  $(this).removeClass();  }));  $("body").click(function() {  $("#divList").slideUp("fast");  $("#imgDefault").hover(function() {  $(this).addClass("alpha");  }, function() {  $(this).removeClass();  });  });

还有我们用到的action

public ActionResult CreateService()         {             ViewData["company"] = GetCompanyList();             Listblank=new List();             blank.Add(GetBlankDepartment());             ViewData["department"] =  blank.ToArray();             ViewData["head"] = GetHeadList();             ViewData["selectedUrl"] = Url.Content(Head_Folder + "Head/head0.gif");             ViewData["arrowUrl"] = Url.Content(Head_Folder + "/dropdown.gif");             ViewData["imageTable"] = GetImageTable();             return View();         }    [AcceptVerbs(HttpVerbs.Get)]         public ActionResult GetDepartment(int? company)         {             SelectListItem[] items=null;             if(company!=null)                items = GetDepartmentList((int)company);             else            {                 SelectListItem i=GetBlankDepartment();                 items=new SelectListItem[]{i};             }             return Json(items);         }       private SelectListItem[] GetCompanyList()         {             ServiceDataContext db = new ServiceDataContext();             var items = from t in db.Companies                         select new                        {                             ID = t.ID,                             Name = t.Name,                             Brief = t.Brief                         };             Lists = new List();             SelectListItem b = new SelectListItem();             b.Text = "--please select company--";             b.Value = "";             s.Add(b);             foreach (var i in items)             {                 SelectListItem item = new SelectListItem();                 item.Text = i.Name;                 item.Value = i.ID.ToString();                 s.Add(item);             }             return s.ToArray();         }          private SelectListItem[] GetDepartmentList(int nCompanyId)         {              ServiceDataContext db = new ServiceDataContext();             var items = from t in db.Departments                         where t.Company==nCompanyId                         select new                        {                             ID = t.ID,                             Name = t.Name,                             Brief = t.Brief                         };             Lists = new List();             SelectListItem b = new SelectListItem();             b.Text = "--please select department--";             b.Value = "";             s.Add(b);             foreach (var i in items)             {                 SelectListItem item = new SelectListItem();                 item.Text = i.Name;                 item.Value = i.ID.ToString();                 s.Add(item);             }             return s.ToArray();         }          private string[] GetHeadList()         {             Listhead = new List();             string strServer=Url.Content("~/Content/images/Head/");             string strUrlFolder = Server.MapPath(Url.Content(Head_Folder+"Head/"));             string[] fileEntries = Directory.GetFiles(strUrlFolder);             FileInfo fi=null;             foreach (string file in fileEntries)             {                 fi =  new FileInfo(file);                 if (fi.Name.ToLower().IndexOf("head")==0 && !fi.FullName.ToLower().Contains("_offline"))                 {                     head.Add(strServer+fi.Name);                 }             }             return head.ToArray();         }          private string GetImageTable()         {             System.Text.StringBuilder sbResult = new System.Text.StringBuilder();             string[] arrImgs = GetHeadList();             foreach (string strImage in arrImgs)             {                 string strFile=strImage.Substring(strImage.LastIndexOf("/")+1);                 sbResult.AppendLine(string.Format("",                     "img_"+strFile.Remove(strFile.LastIndexOf(".")),                     Url.Content(strImage)                     ));             }             string strImg=sbResult.ToString();             strImg=strImg.Remove(strImg.Length-5,5);             return strImg;         }     }

注意紫色处，我们加了cssimgList来供jquery选择

$("img:.imgList").click(function() {                  $("#imgDefault").attr("src", $(this).attr("src"));                  $("#divList").slideToggle("fast");                  $("#head").val($("#imgDefault").attr("src"));              }).hover(function() {                  $(this).removeClass().addClass("alpha");              }, (function() {                  $(this).removeClass();              }));

好了，可以试试效果了。

到此，相信大家对“如何利用img和div标签实现图像下拉列表的模拟”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！