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

Question

这是我的listbox编辑器模板

@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 = " " })}

如果我们在这里设置宽度，则会设置整个列表框宽度。

Answer 1

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

参见此链接到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");
}
}

Answer 2

我认为您正在设置整个列表框i.e:@html.Listbox的html属性。因此，您将得到相同的宽度。