Question

我已经看到了一些似乎与我的问题类似的问题，但我还没有能够解决我的问题 - 所以我希望有人有同样的问题或知道如何最好地解决这个问题。

我有一个来自数据库的 SelectedItemList 的地点信息。它返回位置的列表，主要是城市，但也列出了一些国家/地区。此列表将如此显示;

Australia
Melbourne
Perth
Sydney
Bermuda
Canada
Calgary
Toronto
Vancouver

列表中的所有项目都有Id和Text属性，属于国家/地区的任何城市都有 ParentLocation_Id 属性，该属性对应于国家ID （澳大利亚是8，所以悉尼和珀斯的“ParentLocation_Id”为8，等等。）所以我知道这是我将用于定位列表中的那些项目的条件，以便缩进正确的项目。

我想使用@ Html.DropDownListFor（）方法并能够定位国家/地区以缩进它们，因此列表会出现在Select列表中，如此;

但我想知道是否有一种更简洁的方法来使用HTML扩展来实现这一点。有没有人曾经尝试过这个？

到目前为止我通过这种方式管理它，但你可以看到它看起来很可怕:(

<select id="SelectedLocation" name="SelectedLocation">
                    @{
                        foreach (var location in Model.Locations)
                        {
                            if (location.Item.ParentLocation != null && location.Item.ParentLocation.Id != null)
                            {
                                <option value="@location.Item.Id" class="styled">&nbsp;&nbsp;&nbsp;&nbsp;@location.Item.Text</option>
                            }
                            else
                            {
                                <option value="@location.Item.Id" class="styled">@location.Item.Text</option>
                            }
                        }
                    }
                </select>

甚至可能这是实现此UI的唯一方法，但我很想知道是否有人想到更好的方法来处理这个问题。

谢谢！

Answer 1

感谢所有人帮助解决我的问题。

我和我的老板谈到了我的问题，他建议我通过想要做一个扩展方法来使事情变得过于复杂。

我已经设法通过一个简单的单选按钮列表，一点点JS和一些样式来获得我想要的外观和效果。

这花了我一点时间，但我已经学到了一些东西，所以我认为这是一项有价值的任务：）

任何有兴趣的人都可以查看以下代码

       /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    $('#selectLocation').click(function () {
        document.getElementById("locationDropdown").classList.toggle("show");
        return false;
    });

    // Close the dropdown menu if the user clicks outside of it
    window.onclick = function (event) {
        if (!event.target.matches('.dropbtn')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    };
    $('input[name="SelectedLocation"]').on('change', function () {
        var idVal = $(this).attr("id");
        $("#selectLocation").text($("label[for='" + idVal + "']").text());
    });

.field {
    float: left;
    clear: left;
    margin: 1em 0;
    width: 100%;
}

field-label {
    float: left;
    margin: 0 10px 0 0;
    width: 180px;
    line-height: 140%;
    font-size: .9375em;
}
.dropdown {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 200px;
}
#selectLocation a {
    cursor: pointer;
    text-decoration: none;
}
#content a {
    text-decoration: underline;
    color: #333;
}
#selectLocation {
    -moz-appearance: none;
    -webkit-appearance: none;
    background: #fff url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png) no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    border: 1px solid #ccc;
    display: block;
    padding: 10px;
    width: 100%;
}
#locationDropdown {
    border: 1px solid #799BD2;
    height: 300px;
    list-style-type: none;
    margin: 0;
    margin-top: 0;
    overflow-y: scroll;
    padding-left: 0;
}
ul#locationDropdown li:hover {
    background-color: #1E90FF;
}
#content ul {
    list-style: disc outside;
}
.dropdown-content {
    background-color: #f9f9f9;
    box-shadow: 0 8px 16px 0px rgba(0, 0, 0, 0.2);
    display: none;
    min-width: 160px;
    position: absolute;
    z-index: 1;
}
.lblLocation {
    display: inline-block;
    width: 100%;
}
input[name="SelectedLocation"] {
    display: none;
}
.indent {
    padding-left: 10px;
}
.indentExtra {
    padding-left: 30px;
}
.dropdown-content.show {
    margin: 0;
    width: 110%;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="dropdown">
  <a id="selectLocation">
    <span>Select location</span>
  </a>
  <ul id="locationDropdown" class="dropdown-content">
    <li>
      <label class="lblLocation" for="8" value="Australia">
                                        <input id="8" name="SelectedLocation" type="radio" value="8">
                                        <span class="indent">Australia</span>
                                    </label>


    </li>
    <li>
      <label class="lblLocation" for="9" value="Melbourne">
                                        <input id="9" name="SelectedLocation" type="radio" value="9">
                                        <span class="indentExtra">Melbourne</span>
                                    </label>
    </li>
    <li>
      <label class="lblLocation" for="10" value="Perth">
                                        <input id="10" name="SelectedLocation" type="radio" value="10">
                                        <span class="indentExtra">Perth</span>
                                    </label>
    </li>
    <li>
      <label class="lblLocation" for="11" value="Sydney">
                                        <input id="11" name="SelectedLocation" type="radio" value="11">
                                        <span class="indentExtra">Sydney</span>
                                    </label>
    </li>
    <li>
      <label class="lblLocation" for="12" value="Bermuda">
                                        <input id="12" name="SelectedLocation" type="radio" value="12">
                                        <span class="indent">Bermuda</span>
                                    </label>
    </li>
    <li>
      <label class="lblLocation" for="13" value="Canada">
                                        <input id="13" name="SelectedLocation" type="radio" value="13">
                                        <span class="indent">Canada</span>
                                    </label>
    </li>
    <li>
      <label class="lblLocation" for="14" value="Calgary">
                                        <input id="14" name="SelectedLocation" type="radio" value="14">
                                        <span class="indentExtra">Calgary</span>
                                    </label>
    </li>
    <li>
      <label class="lblLocation" for="15" value="Toronto">
                                        <input id="15" name="SelectedLocation" type="radio" value="15">
                                        <span class="indentExtra">Toronto</span>
                                    </label>
    </li>
    <li>
      <label class="lblLocation" for="16" value="Vancouver">
                                        <input id="16" name="SelectedLocation" type="radio" value="16">
                                        <span class="indentExtra">Vancouver</span>
                                    </label>
    </li>
  </ul>
</div>

再次感谢所有评论的人！

在DropDownList中的某些项目上添加缩进 - ASP.net MVC Razor View

1 个答案: