使用img和div标签完成图画下拉列表的模仿-编程开发-知优网

本文介绍了利用img和div标签实现图像下拉列表的方法。这个方法不用自定义控件之类，因为我们在mvc下不能使用asp.net服务器控件，所以我们只用了div和img标签实现这个功能。

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 =