Question

＆＃13;

   <select align="center" style="background-color:#ADCEEC;" name="webmenu" id="webmenu">
                        <option value="" title="~/Image/tb_viewer_fittopage_context.png">Auf Seite einpassen Alt+P</option>
                        <option value="" title="~/Image/tb_viewer_fittowidth_context.png">Auf Breite einpassen Alt+W</option>
                        <option value="" title="~/Image/tb_viewer_fittoheight_context.png">Auf Höhe einpassen Alt+H</option>
                        <option value="" selected="selected" title="~/Image/tb_viewer_onetoone_context.png">1:1</option>
                    </select>

＆＃13;

我正在使用这个插件： JavaScript图像组合框v3.3 有一个带图像的下拉列表..但是有可能改变它的方式，点击每个项目后，只有图像被选中并显示而不是图像和文本作为一个选定项目。我想当我打开下拉列表我查看文本和图像，但在选择后，我选择的项目仅显示相关图像。

最好的问候

这就是.css文件的样子：

＆＃13;

.dd {
	/*display:inline-block !important;*/
	text-align:left;
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	float:left;
}
.dd .ddTitle {
	background:#f2f2f2;
	border:1px solid #c3c3c3;
	padding:3px;
	text-indent:0;
	cursor:default;
	overflow:hidden;
	height:16px;
}
.dd .ddTitle span.arrow {
	background:url(dd_arrow.gif) no-repeat 0 0; float:right; display:inline-block;width:16px; height:16px; cursor:pointer; 
}

.dd .ddTitle span.ddTitleText {text-indent:1px; overflow:hidden; line-height:16px;}
.dd .ddTitle span.ddTitleText img{text-align:left; padding:0 2px 0 0}
.dd .ddTitle img.selected {
	padding:0 3px 0 0;
	vertical-align:top;
}
.dd .ddChild {
	position:absolute;
	border:1px solid #c3c3c3;
	border-top:none;
	display:none;
	margin:0;
	width:auto;
	overflow:auto;
	overflow-x:hidden !important;
	background-color:#ffffff;    
}
.dd .ddChild .opta a, .dd .ddChild .opta a:visited {padding-left:10px}
.dd .ddChild a {
	display:block;
	padding:2px 0 2px 3px;
	text-decoration:none;
	color:#000;
	overflow:hidden;
	white-space:nowrap;
	cursor:pointer;
}
.dd .ddChild a:hover {
	/*background-color:#66CCFF;*/
    background-color:lightgray;
}
.dd .ddChild a img {
	border:0;
	padding:0 2px 0 0;
	vertical-align:middle;
}
.dd .ddChild a.selected {
	/*background-color:#66CCFF;*/
	background-color:#ADCEEC;
}
.hidden {display:none;}

.dd .borderTop{border-top:1px solid #c3c3c3 !important;}
.dd .noBorderTop{border-top:none 0  !important}

＆＃13;

这就是.css文件的样子：

这就是我添加到剃刀视图中的内容：

最后我添加了javascript代码：

 $(document).ready(function (e) {
         try {
          $("body select").msDropDown();
       } catch (e) {
          alert(e.message);
       }
});

它是下拉列表的图像：

Answer 1

我在这里查看了示例：http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/examples/index.html看起来选项是使用列表而不是标准<option>标记构建的。对于图像，只需在标记中插入<img标记。例如一个选项如下：

<li> class="enabled _msddli_">
 <img src="..images/msdropdown/icons/Amex-56.png">
  <span class="ddlalbel">Amex</span>
  <span class="description">My life. My card...<span>
  <div class="clear"><div>
</li>

因此您必须隐藏除<img标记之外的所有内容。我想你可以简单地写一个这样的CSS规则：

.ddTitleText > span 
{ 
  display:none !important;
}

带图像的下拉列表mvc asp.net

1 个答案: