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

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

成都创新互联-专业网站定制、快速模板网站建设、高性价比郫都网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式郫都网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖郫都地区。费用合理售后完善，十多年实体公司更值得信赖。

[[3393]]

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

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

用到的表

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

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

 
 
 
 
    
  
  
  
  
  1. [AcceptVerbs(HttpVerbs.Post)] 
    2. 
  
  
  
  
  2. publicActionResult CreateCompany(string name, string brief) 
    3. 
  
  
  
  
  3. { 
    4. 
  
  
  
  
  4. string strResult = "失败"; 
    5. 
  
  
  
  
  5. ServiceDataContext db =newServiceDataContext(); 
    6. 
  
  
  
  
  6. Company com =newCompany(); 
    7. 
  
  
  
  
  7. com.Name = name; 
    8. 
  
  
  
  
  8. com.Brief = brief; 
    9. 
  
  
  
  
  9. try
    10. 
  
  
  
  
  10. { 
    11. 
  
  
  
  
  11. db.Companies.InsertOnSubmit(com); 
    12. 
  
  
  
  
  12. db.SubmitChanges(); 
    13. 
  
  
  
  
  13. strResult = "成功"; 
    14. 
  
  
  
  
  14. } 
    15. 
  
  
  
  
  15. catch
    16. 
  
  
  
  
  16. { 
    17. 
  
  
  
  
  17. strResult = "失败，名称重复？"; 
    18. 
  
  
  
  
  18. } 
    19. 
  
  
  
  
  19. returnJson(strResult); 
    20. 
  
  
  
  
  20. } 
    21.

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

   
   
   
   
    
    
    
    
    
    2. 
    
    
    
    
  2. id="imgDefault" src='<%=ViewData["selectedUrl"]%>' class="imgCss" alt=""/>
    3. 
    
    
    
    
  3.  id="imgArrow" src="<%=ViewData["arrowUrl"]%>" class="DropdownCss" alt=""/>
    4. 
    
    
    
    
  4. id="divList" class="scrolldivHidden">
    5. 
    
    
    
    
  5. <%=ViewData["imageTable"]%> div>
    6. 
    
    
    
    
  6. <%=Html.Hidden("head") %>
    7. 
    
    
    
    
  7.  td>
    8.

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

这里用到的css

   
   
   
   
    
    
    
    
    
  1. .Visible 
    2. 
    
    
    
    
  2. { 
    3. 
    
    
    
    
  3. visibility: visible; 
    4. 
    
    
    
    
  4. display: block; 
    5. 
    
    
    
    
  5. } 
    6. 
    
    
    
    
  6. .Hidden 
    7. 
    
    
    
    
  7. { 
    8. 
    
    
    
    
  8. visibility: hidden; 
    9. 
    
    
    
    
  9. display: none; 
    10. 
    
    
    
    
  10. } 
    11. 
    
    
    
    
  11. .imgCss 
    12. 
    
    
    
    
  12. { 
    13. 
    
    
    
    
  13. cursor: hand; 
    14. 
    
    
    
    
  14. width: 18px; 
    15. 
    
    
    
    
  15. height: 18px; 
    16. 
    
    
    
    
  16. border: 1px solid #c3c3c3; 
    17. 
    
    
    
    
  17. } 
    18. 
    
    
    
    
  18. .DropdownCss 
    19. 
    
    
    
    
  19. { 
    20. 
    
    
    
    
  20. cursor: hand; 
    21. 
    
    
    
    
  21. width: 9px; 
    22. 
    
    
    
    
  22. height: 9px; 
    23. 
    
    
    
    
  23. vertical-align: top; 
    24. 
    
    
    
    
  24. } 
    25. 
    
    
    
    
  25. .scrolldivHidden 
    26. 
    
    
    
    
  26. { 
    27. 
    
    
    
    
  27. position:absolute; 
    28. 
    
    
    
    
  28. width: 36px; 
    29. 
    
    
    
    
  29. height: 50px; 
    30. 
    
    
    
    
  30. z-index: 1; 
    31. 
    
    
    
    
  31.  left: 0px; 
    32. 
    
    
    
    
  32.  top: 0x; 
    33. 
    
    
    
    
  33.  overflow-y: auto; 
    34. 
    
    
    
    
  34.  overflow-x:hidden; 
    35. 
    
    
    
    
  35. display:none; 
    36. 
    
    
    
    
  36. } 
    37. 
    
    
    
    
  37. .scrolldivVisible 
    38. 
    
    
    
    
  38. { 
    39. 
    
    
    
    
  39. position:absolute; 
    40. 
    
    
    
    
  40. width: 36px; 
    41. 
    
    
    
    
  41. height: 50px; 
    42. 
    
    
    
    
  42. z-index: 1; 
    43. 
    
    
    
    
  43.  left: 0px; 
    44. 
    
    
    
    
  44.  top: 0x; 
    45. 
    
    
    
    
  45.  overflow-y: auto; 
    46. 
    
    
    
    
  46.  overflow-x:hidden; 
    47. 
    
    
    
    
  47. display:block; 
    48. 
    
    
    
    
  48. } 
    49.

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

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

   
   
   
   
    
    
    
    
    
  1. /*  
    2. 
    
    
    
    
  2. * Manipulation for HTML SELECT with jQuery  
    3. 
    
    
    
    
  3. * Created by Baldwin (http://www.dnnsun.com)  
    4. 
    
    
    
    
  4. * version: 1.0 (02/03/2009)  
    5. 
    
    
    
    
  5. * @requires jQuery v1.2 or later  
    6. 
    
    
    
    
  6. */ 
    7. 
    
    
    
    
  7. ; (function($) { 
    8. 
    
    
    
    
  8.  /* Clear all options */ 
    9. 
    
    
    
    
  9.  $.fn.clearSelect =function() { 
    10. 
    
    
    
    
  10. returnthis.each(function() { 
    11. 
    
    
    
    
  11. if(this.tagName == 'SELECT')this.options.length = 0; 
    12. 
    
    
    
    
  12.  }); 
    13. 
    
    
    
    
  13.  } 
    14. 
    
    
    
    
  14.  
    15. 
    
    
    
    
  15.  /* Fill the options with the object array: [{'Text':'Hello','Value':'1'}]*/ 
    16. 
    
    
    
    
  16.  $.fn.fillSelect =function(data) { 
    17. 
    
    
    
    
  17. returnthis.clearSelect().each(function() { 
    18. 
    
    
    
    
  18. if(this.tagName == 'SELECT') { 
    19. 
    
    
    
    
  19. vardropdownList =this; 
    20. 
    
    
    
    
  20. if(data && data.length > 0) { 
    21. 
    
    
    
    
  21.  $.each(data,function(index, optionData) { 
    22. 
    
    
    
    
  22. varoption =newOption(optionData.Text, optionData.Value); 
    23. 
    
    
    
    
  23.  
    24. 
    
    
    
    
  24. if($.browser.msie) 
    25. 
    
    
    
    
  25.  dropdownList.add(option); 
    26. 
    
    
    
    
  26. else
    27. 
    
    
    
    
  27.  dropdownList.add(option,null); 
    28. 
    
    
    
    
  28.  }); 
    29. 
    
    
    
    
  29.  dropdownList.disabled =false; 
    30. 
    
    
    
    
  30.  } 
    31. 
    
    
    
    
  31. else
    32. 
    
    
    
    
  32.  dropdownList.disabled =true; 
    33. 
    
    
    
    
  33.  } 
    34. 
    
    
    
    
  34.  }); 
    35. 
    
    
    
    
  35.  } 
    36. 
    
    
    
    
  36.  
    37. 
    
    
    
    
  37.  /* loading when applying Ajax fillSelect */ 
    38. 
    
    
    
    
  38.  $.fn.loadSelect =function(loadText) { 
    39. 
    
    
    
    
  39. vardata = [{ 'Text': loadText, 'Value': ''}]; 
    40. 
    
    
    
    
  40. this.fillSelect(data); 
    41. 
    
    
    
    
  41.  } 
    42. 
    
    
    
    
  42.  
    43. 
    
    
    
    
  43.  /* selected the target option with value */ 
    44. 
    
    
    
    
  44.  $.fn.selected =function(value) { 
    45. 
    
    
    
    
  45. returnthis.each(function() { 
    46. 
    
    
    
    
  46. if(this.tagName == 'SELECT') { 
    47. 
    
    
    
    
  47. varoptions =this.options; 
    48. 
    
    
    
    
  48. if(options.length > 0) { 
    49. 
    
    
    
    
  49.  $.each(options,function(index, optionData) { 
    50. 
    
    
    
    
  50.  // once match then exist loop  
    51. 
    
    
    
    
  51. if(optionData.value == value) { 
    52. 
    
    
    
    
  52.  optionData.selected =true; 
    53. 
    
    
    
    
  53. returnfalse; 
    54. 
    
    
    
    
  54.  } 
    55. 
    
    
    
    
  55.  }); 
    56. 
    
    
    
    
  56.  } 
    57. 
    
    
    
    
  57.  } 
    58. 
    
    
    
    
  58.  }); 
    59. 
    
    
    
    
  59.  } 
    60. 
    
    
    
    
  60.  
    61. 
    
    
    
    
  61.  /* TODO:selected the target option with text */ 
    62. 
    
    
    
    
  62.  $.fn.selectedText =function(text) { 
    63. 
    
    
    
    
  63. returnthis.each(function() { 
    64. 
    
    
    
    
  64. if(this.tagName == 'SELECT') { 
    65. 
    
    
    
    
  65. varoptions =this.options; 
    66. 
    
    
    
    
  66. if(options.length > 0) { 
    67. 
    
    
    
    
  67.  $.each(options,function(index, optionData) { 
    68. 
    
    
    
    
  68.  // once match then exist loop  
    69. 
    
    
    
    
  69. if(optionData.text == text) { 
    70. 
    
    
    
    
  70.  optionData.selected =true; 
    71. 
    
    
    
    
  71. returnfalse; 
    72. 
    
    
    
    
  72.  } 
    73. 
    
    
    
    
  73.  }); 
    74. 
    
    
    
    
  74.  } 
    75. 
    
    
    
    
  75.  } 
    76. 
    
    
    
    
  76.  }); 
    77. 
    
    
    
    
  77.  } 
    78. 
    
    
    
    
  78.  
    79. 
    
    
    
    
  79.  /* returns the selected value */ 
    80. 
    
    
    
    
  80.  $.fn.getSelected =function() { 
    81. 
    
    
    
    
  81. return$(this).val(); 
    82. 
    
    
    
    
  82.  } 
    83. 
    
    
    
    
  83.  
    84. 
    
    
    
    
  84.  /* return the text of selected option */ 
    85. 
    
    
    
    
  85.  $.fn.getSelectedText =function() { 
    86. 
    
    
    
    
  86. return$(this).children("[@selected]").text(); 
    87. 
    
    
    
    
  87.  } 
    88. 
    
    
    
    
  88. })(jQuery); 
    89. 
    
    
    
    
  89.  
    90. 
    
    
    
    
  90.  
    91. 
    
    
    
    
  91. functiongetDepartment(data) { $("#department").fillSelect(data); } 
    92. 
    
    
    
    
  92.  
    93. 
    
    
    
    
  93. $("#company").change(function() { 
    94. 
    
    
    
    
  94.  $.getJSON("GetDepartment?company=" + $("#company").val(),null, getDepartment); 
    95. 
    
    
    
    
  95.  }); 
    96.

实现了联动框

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

   
   
   
   
    
    
    
    
    
  1.  $("#imgArrow,#imgDefault").toggle(function() { 
    2. 
    
    
    
    
  2. $("#divList").css("left", $("#imgDefault").css("left")); 
    3. 
    
    
    
    
  3. $("#divList").slideToggle("fast"); 
    4. 
    
    
    
    
  4. },function() { 
    5. 
    
    
    
    
  5. $("#divList").css("left", $("#imgDefault").css("left")); 
    6. 
    
    
    
    
  6. $("#divList").slideToggle("fast"); 
    7. 
    
    
    
    
  7. }); 
    8. 
    
    
    
    
  8. $("#head").val($("#imgDefault").attr("src")); 
    9. 
    
    
    
    
  9. $("img:.imgList").click(function() { 
    10. 
    
    
    
    
  10. $("#imgDefault").attr("src", $(this).attr("src")); 
    11. 
    
    
    
    
  11. $("#divList").slideToggle("fast"); 
    12. 
    
    
    
    
  12. $("#head").val($("#imgDefault").attr("src")); 
    13. 
    
    
    
    
  13. }).hover(function() { 
    14. 
    
    
    
    
  14. $(this).removeClass().addClass("alpha"); 
    15. 
    
    
    
    
  15. }, (function() { 
    16. 
    
    
    
    
  16. $(this).removeClass(); 
    17. 
    
    
    
    
  17. })); 
    18. 
    
    
    
    
  18. $("body").click(function() { 
    19. 
    
    
    
    
  19. $("#divList").slideUp("fast"); 
    20. 
    
    
    
    
  20. $("#imgDefault").hover(function() { 
    21. 
    
    
    
    
  21. $(this).addClass("alpha"); 
    22. 
    
    
    
    
  22. },function() { 
    23. 
    
    
    
    
  23. $(this).removeClass(); 
    24. 
    
    
    
    
  24. }); 
    25. 
    
    
    
    
  25. }); 
    26.

还有我们用到的action

   
   
   
   
    
    
    
    
    
  1. publicActionResult CreateService() 
    2. 
    
    
    
    
  2.  { 
    3. 
    
    
    
    
  3.  ViewData["company"] = GetCompanyList(); 
    4. 
    
    
    
    
  4.  List blank=newList ();  
    5. 
    
    
    
    
  5.  blank.Add(GetBlankDepartment()); 
    6. 
    
    
    
    
  6.  ViewData["department"] = blank.ToArray(); 
    7. 
    
    
    
    
  7.  ViewData["head"] = GetHeadList(); 
    8. 
    
    
    
    
  8.  ViewData["selectedUrl"] = Url.Content(Head_Folder + "Head/head0.gif"); 
    9. 
    
    
    
    
  9.  ViewData["arrowUrl"] = Url.Content(Head_Folder + "/dropdown.gif"); 
    10. 
    
    
    
    
  10.  ViewData["imageTable"] = GetImageTable(); 
    11. 
    
    
    
    
  11. returnView(); 
    12. 
    
    
    
    
  12.  } 
    13. 
    
    
    
    
  13.  [AcceptVerbs(HttpVerbs.Get)] 
    14. 
    
    
    
    
  14. publicActionResult GetDepartment(int? company) 
    15. 
    
    
    
    
  15.  { 
    16. 
    
    
    
    
  16.  SelectListItem[] items=null; 
    17. 
    
    
    
    
  17. if(company!=null) 
    18. 
    
    
    
    
  18.  items = GetDepartmentList((int)company); 
    19. 
    
    
    
    
  19. else
    20. 
    
    
    
    
  20.  { 
    21. 
    
    
    
    
  21.  SelectListItem i=GetBlankDepartment(); 
    22. 
    
    
    
    
  22.  items=newSelectListItem[]{i}; 
    23. 
    
    
    
    
  23.  } 
    24. 
    
    
    
    
  24. returnJson(items); 
    25. 
    
    
    
    
  25.  } 
    26. 
    
    
    
    
  26. privateSelectListItem[] GetCompanyList() 
    27. 
    
    
    
    
  27.  { 
    28. 
    
    
    
    
  28.  ServiceDataContext db =newServiceDataContext(); 
    29. 
    
    
    
    
  29. varitems = from tindb.Companies 
    30. 
    
    
    
    
  30.  selectnew
    31. 
    
    
    
    
  31.  { 
    32. 
    
    
    
    
  32.  ID = t.ID, 
    33. 
    
    
    
    
  33.  Name = t.Name, 
    34. 
    
    
    
    
  34.  Brief = t.Brief 
    35. 
    
    
    
    
  35.  }; 
    36. 
    
    
    
    
  36.  List s =newList ();  
    37. 
    
    
    
    
  37.  SelectListItem b =newSelectListItem(); 
    38. 
    
    
    
    
  38.  b.Text = "--please select company--"; 
    39. 
    
    
    
    
  39.  b.Value = ""; 
    40. 
    
    
    
    
  40.  s.Add(b); 
    41. 
    
    
    
    
  41.  foreach (variinitems) 
    42. 
    
    
    
    
  42.  { 
    43. 
    
    
    
    
  43.  SelectListItem item =newSelectListItem(); 
    44. 
    
    
    
    
  44.  item.Text = i.Name; 
    45. 
    
    
    
    
  45.  item.Value = i.ID.ToString(); 
    46. 
    
    
    
    
  46.  s.Add(item); 
    47. 
    
    
    
    
  47.  } 
    48. 
    
    
    
    
  48. returns.ToArray(); 
    49. 
    
    
    
    
  49.  } 
    50. 
    
    
    
    
  50.  
    51. 
    
    
    
    
  51. privateSelectListItem[] GetDepartmentList(intnCompanyId) 
    52. 
    
    
    
    
  52.  { 
    53. 
    
    
    
    
  53.  
    54. 
    
    
    
    
  54.  ServiceDataContext db =newServiceDataContext(); 
    55. 
    
    
    
    
  55. varitems = from tindb.Departments 
    56. 
    
    
    
    
  56.  where t.Company==nCompanyId 
    57. 
    
    
    
    
  57.  selectnew
    58. 
    
    
    
    
  58.  { 
    59. 
    
    
    
    
  59.  ID = t.ID, 
    60. 
    
    
    
    
  60.  Name = t.Name, 
    61. 
    
    
    
    
  61.  Brief = t.Brief 
    62. 
    
    
    
    
  62.  }; 
    63. 
    
    
    
    
  63.  List s =newList ();  
    64. 
    
    
    
    
  64.  SelectListItem b =newSelectListItem(); 
    65. 
    
    
    
    
  65.  b.Text = "--please select department--"; 
    66. 
    
    
    
    
  66.  b.Value = ""; 
    67. 
    
    
    
    
  67.  s.Add(b); 
    68. 
    
    
    
    
  68.  foreach (variinitems) 
    69. 
    
    
    
    
  69.  { 
    70. 
    
    
    
    
  70.  SelectListItem item =newSelectListItem(); 
    71. 
    
    
    
    
  71.  item.Text = i.Name; 
    72. 
    
    
    
    
  72.  item.Value = i.ID.ToString(); 
    73. 
    
    
    
    
  73.  s.Add(item); 
    74. 
    
    
    
    
  74.  } 
    75. 
    
    
    
    
  75. returns.ToArray(); 
    76. 
    
    
    
    
  76.  } 
    77. 
    
    
    
    
  77.  
    78. 
    
    
    
    
  78. privatestring[] GetHeadList() 
    79. 
    
    
    
    
  79.  { 
    80. 
    
    
    
    
  80.  List head =newList ();  
    81. 
    
    
    
    
  81.  string strServer=Url.Content("~/Content/images/Head/"); 
    82. 
    
    
    
    
  82.  string strUrlFolder = Server.MapPath(Url.Content(Head_Folder+"Head/")); 
    83. 
    
    
    
    
  83.  string[] fileEntries = Directory.GetFiles(strUrlFolder); 
    84. 
    
    
    
    
  84.  FileInfo fi=null; 
    85. 
    
    
    
    
  85.  foreach (string fileinfileEntries) 
    86. 
    
    
    
    
  86.  { 
    87. 
    
    
    
    
  87.  fi =newFileInfo(file); 
    88. 
    
    
    
    
  88. if(fi.Name.ToLower().IndexOf("head")==0 && !fi.FullName.ToLower().Contains("_offline")) 
    89. 
    
    
    
    
  89.  { 
    90. 
    
    
    
    
  90.  head.Add(strServer+fi.Name); 
    91. 
    
    
    
    
  91.  } 
    92. 
    
    
    
    
  92.  } 
    93. 
    
    
    
    
  93. returnhead.ToArray(); 
    94. 
    
    
    
    
  94.  } 
    95. 
    
    
    
    
  95.  
    96. 
    
    
    
    
  96. privatestring GetImageTable() 
    97. 
    
    
    
    
  97.  { 
    98. 
    
    
    
    
  98.  System.Text.StringBuilder sbResult =newSystem.Text.StringBuilder(); 
    99. 
    
    
    
    
  99.  string[] arrImgs = GetHeadList(); 
    100. 
    
    
    
    
  100.  foreach (string strImageinarrImgs) 
    101. 
    
    
    
    
  101.  { 
    102. 
    
    
    
    
  102.  string strFile=strImage.Substring(strImage.LastIndexOf("/")+1); 
    103. 
    
    
    
    
  103.  sbResult.AppendLine(string.Format("", 
    104. 
    
    
    
    
  104.  "img_"+strFile.Remove(strFile.LastIndexOf(".")), 
    105. 
    
    
    
    
  105.  Url.Content(strImage) 
    106. 
    
    
    
    
  106.  )); 
    107. 
    
    
    
    
  107.  } 
    108. 
    
    
    
    
  108.  string strImg=sbResult.ToString(); 
    109. 
    
    
    
    
  109.  strImg=strImg.Remove(strImg.Length-5,5); 
    110. 
    
    
    
    
  110. returnstrImg; 
    111. 
    
    
    
    
  111.  } 
    112. 
    
    
    
    
  112.  } 
    113.

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

   
   
   
   
    
    
    
    
    
  1. $("img:.imgList").click(function() { 
    2. 
    
    
    
    
  2.  $("#imgDefault").attr("src", $(this).attr("src")); 
    3. 
    
    
    
    
  3.  $("#divList").slideToggle("fast"); 
    4. 
    
    
    
    
  4.  $("#head").val($("#imgDefault").attr("src")); 
    5. 
    
    
    
    
  5.  }).hover(function() { 
    6. 
    
    
    
    
  6.  $(this).removeClass().addClass("alpha"); 
    7. 
    
    
    
    
  7.  }, (function() { 
    8. 
    
    
    
    
  8.  $(this).removeClass(); 
    9. 
    
    
    
    
  9.  })); 
    10.

好了，可以试试效果了。

名称栏目：利用img和div标签实现图像下拉列表的模拟
路径分享：http://www.shufengxianlan.com/qtweb/news42/301492.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸建站知识

同城分类信息

雅安服务器托管　　 　复盛机电设备安装　　 　企业网站建设公司　　 　域名注册　　 　乐山服务器托管　　 　手机网站建设　　 　3D立体画　　 　重庆联通机房托管　　 　电信成都枢纽中心　　 　南充网站制作　　 　成都谷歌SEO　　 　成都免费网站建设　　 　贵州义龙电信机房　　 　网站seo优化　　 　手机APP开发　　 　成都网站维护公司　　 　成都网站建设　　 　APP定制开发　　 　网站改版维护　　 　成都服装定制