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

Question

I've seen a few questions that seem similiar to my issue, but I haven't been able to nail my question yet - so I'm hoping someone has either had the same issue or knows how best to approach this.

I have a SelectedItemList of Locations from a database. It returns a list of Locations , mostly cities but some countries are listed too. This list would appear as such;

Australia
Melbourne
Perth
Sydney
Bermuda
Canada
Calgary
Toronto
Vancouver

All the items in the list have an Id and Text property, and any cities that belong to countries have a ParentLocation_Id property, which corresponds to the country Id (Australia is 8, so Sydney and Perth will have "ParentLocation_Id" of 8, etc.) So I know this is the conditional I will use to target those items within the list, in order to indent the correct ones.

I would like to use the @Html.DropDownListFor() method and be able to target the countries in order to indent them, so the list would appear within the Select list like so;

but I wondered if there was a neater way to do this by using an HTML Extension. Has anyone ever tried this before?

I have managed it so far by doing it this way, but you can see it looks hideous :(

<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>

It may even be that this is the only way to achieve this UI, but I'd love to know if anyone thinks of anything better to handle this.

Thanks!

Answer 1

Thanks to all for helping with my issue.

I spoke with my boss re my problem, and he suggested I was over-complicating things slightly by wanting to do an Extension method.

I have managed to get the look and effect I want from a simple radio-button list, a little bit of JS and some styling.

It's taken me a little bit longer but I've learned something so I'm seeing it as a worthwhile task :)

Anyone whom is interested can check out the code below

  /* 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> 

Thanks again to all who commented!