如何为多选列表框 mvc 设置下拉宽度答案

【问题标题】：How to set the dropdown width for multi select listbox mvc如何为多选列表框 mvc 设置下拉宽度
【发布时间】：2014-07-22 16:25:42
【问题描述】：

这是我的列表框编辑器模板

@if (ViewData[fieldId + "_list"] is   System.Collections.IEnumerable)
   { 
    @Html.ListBox("", new MultiSelectList((System.Collections.IEnumerable)ViewData[fieldId + "_list"], "Value", "Name", Model),
    new { @style = "margin:0px; width:225px;", @class = "multi-select", multiple = "multiple", data_placeholder = " " })
   }
   else
    { 
@Html.ListBox("", new MultiSelectList(new List<SingleValueHolder<int>>(), Model),
    new { @style = "margin:0px; width:225px;", @class = "multi-select", multiple = "multiple", data_placeholder = " " })}

如果我们在这里设置宽度，整个列表框的宽度就设置好了。

【问题讨论】：

那么你对你写的东西有什么期待？
从上面的列表框工作正常，如果宽度太长，项目将被包裹。如果只想更改下拉宽度而不是控件的实际宽度。有什么办法吗？

标签： asp.net-mvc listbox multi-select

【解决方案1】：

您需要两个列表框，一个具有所需宽度，另一个保存值。然后使用神奇的 z- 索引隐藏具有大下拉菜单的索引

看到这个LINK TO JSFIDDLE

<div> <span> <select readonly='readonly' id='sel' name="sometext" style = "width:55px;position: absolute; z-index: -1">
    <option>text1</option>
    <option>text2</option>
    <option>text3</option> 
    <option >some very long text </option>         
</select>
   <div  style="width:500px;height:25px ;background-color:white; z-index: 10" >
       <div id="ddiv" tyle="width:500px;height:25px ;background-color:white; z-index: 15" />
       <select id='dummy' style = "width:65px;position: absolute; z-index: 10">
             <option style="display:none">text1</option>
    <option style="display:none">text2</option>
    <option style="display:none">text3</option>
            <option style="display:none">some very long text </option>  
       </select>
       </div>
   </span>
</div>

在javascript中

$('#sel').change(function () {
$('#dummy').val($('#sel').val());
});

$('#ddiv').click(function () {
open($('#sel'));
}
);

function open(elem) {
if (document.createEvent) {
    var e = document.createEvent("MouseEvents");
    e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    elem[0].dispatchEvent(e);
} else if (element.fireEvent) {
    elem[0].fireEvent("onmousedown");
}
}

【讨论】：

这太棒了，我不知道如何在我的应用程序中实现
您好，您可以在您的应用程序中使用相同的逻辑来遵循，您将定义额外的下拉框，它将充当虚拟对象。在上面的答案中，虚拟下拉菜单是可见的，点击虚拟下拉菜单即可选中。下拉菜单相互堆叠

【解决方案2】：

我认为您正在设置整个列表框的 html 属性，即：@html.Listbox。所以结果你会得到相同的宽度。

【讨论】：