Question

是否可以使ASP.NET Html.ListBoxFor与多行项目一起使用？因为现在我有一个字符串列表，一些字符串很长，所以它们不适合列表框，并且被剪切，即，而不是“qwertyuiop”，我只看到“qwer”。列表框的宽度无法更改，这是必须的。我可以让它在多行显示单个项目/字符串（我尝试插入新的行符号，html换行符号到字符串，不起作用）？或者我必须使用其他一些html元素而不是Html.ListBoxFor？

编辑：我的代码是：

@Html.ListBoxFor(x => x.MyFriendsIdList, new SelectList(this.Model.MyFriendsDisplayList, "Id", "Name"), new { id = "FriendsSourceList" })

无论如何，我需要制作一个多行列表框，我需要能够搜索/过滤项目并隐藏/显示它们，因为我在搜索文本字段中键入文本。任何推荐？

编辑：最新代码示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <!-- none of these styles work on ff or ie9... -->
    <style>
        select {
            -ms-word-break: break-all;
            -ms-word-wrap: break-all;
            -webkit-word-break: break-word;
            -webkit-word-wrap: break-word;
            word-break: break-word;
            word-wrap: break-word;
            -webkit-hyphens: auto;
            -moz-hyphens: auto;
            hyphens: auto;
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -pre-wrap;
            white-space: -o-pre-wrap;
            display: inline-block;
        }
    </style>
    <head>
        <title>Site Title</title>
    </head>

    <body>
        <h1 style="margin-left:100px;">My List Box Source Example</h1>
        <!-- In style, "word-wrap:break-word" makes items appear over multiple lines if needed, works only on chrome, ff and ie9 broken -->
        <select name="sometext" multiple="multiple" style="width:200px; height:250px; resize:none; margin-left:100px;" id="mylist">
            <option value="1">VeryLongText123456VeryLongText123456VeryLongText123456VeryLongText123456VeryLongText123456VeryLongText123456END</option>
            <option value="3">Text1</option>
            <option value="5">Text2</option>
            <option value="6">Text3</option>
            <option value="7">Text4</option>
            <option value="9">Text5</option>
            <option value="12">abc6</option>
            <option value="14">SomeRandomText</option>
            <option value="45">ghi8</option>
            <option value="16">jkl9</option>
            <option value="11">zzz</option>
            <option value="32">xxx</option>
            <option value="73">LastItemHere</option>
        </select>
        
        <h2 style="margin-left:100px;">Search field</h2>
        <textarea rows="2" cols="45" style="margin-left:100px; resize:none; overflow-y:hidden;" id="searchfield"></textarea><br /><br />
        <input id="FilterButton" type="submit" style="margin-left:200px; width: 125px" value="Filter List" class="radius button"/><br /><br />
        <input id="HideButton" type="submit" style="margin-left:200px; width: 195px" value="Hide items that contains" class="radius button"/>
        
        <h2 style="margin-left:100px;">My Text Area Example</h2>
        <textarea rows="3" cols="45" style="margin-left:100px; resize:none; overflow-y:hidden;" id="mytextarea"></textarea>
 
        <script src="jquery-2.1.1.js"></script>
        <script type="text/javascript">
            // Titles - when mouse over entry
            options = document.getElementById("mylist").getElementsByTagName("option");

            for (var i = 0; i < options.length; i++) {
                options[i].title = options[i].text;
            }
            
            $("#FilterButton").click(function (x) {
                x.preventDefault();
                
                //var size = document.getElementById("searchfield").rows;
                //console.log("size : " + size);
                //document.getElementById("searchfield").rows = size + 1;
                
                //Search and hide works on chrome and ff, ie9 broken
                var searchText = $("#searchfield").val();
                var list = document.getElementById("mylist");
                for (var c = 0; c < list.length; c++) {
                    if(searchText != null && searchText != '') {
                        var index = list[c].text.toLowerCase().indexOf(searchText.toLowerCase());
                        if(index >= 0) {
                            $('#mylist option[value=' + list[c].value + ']').show();
                        }
                        else {
                            $('#mylist option[value=' + list[c].value + ']').hide();
                        }
                    }
                    else {
                        $('#mylist option[value=' + list[c].value + ']').show();
                    }
                }
            });
            
            $("#HideButton").click(function (x) {
                x.preventDefault();
                var searchText = $("#searchfield").val();
                var list = document.getElementById("mylist");
                for (var c = 0; c < list.length; c++) {
                    if(searchText != null && searchText != '') {
                        var index = list[c].text.toLowerCase().indexOf(searchText.toLowerCase());
                        if(index >= 0) {
                            $('#mylist option[value=' + list[c].value + ']').hide();
                        }
                        else {
                            $('#mylist option[value=' + list[c].value + ']').show();
                        }
                    }
                    else {
                        $('#mylist option[value=' + list[c].value + ']').show();
                    }
                }
            });
        </script>
    </body>
 </html>

具有多行项目的{Html.ListBoxFor

0 个答案: