Removing duplicates from a dropdownlist

Question

I have a dropdown that is returning duplicates. I don't know why it is returning duplicates. Here is the control for my dropdown.

    @Html.DropDownList("procDateId", Model.GetEmpHoursDateRange.EmphoursdateSelectList, Model.GetEmpHoursDateRange.selectedEmplhoursdate, new { id = "procDateId" })

I want to be able to remove the duplicates once the page load. I tested the code below with an alert and am able to get to the document.ready

     $(document).ready(function () {

            alert("here you go !!!");

            [].slice.call($('#procDateId').option)
              .map(function (a) {
                  if (this[a.innerText]) {
                      $('#procDateId'.option).removeChild(a);
                  } else {
                      this[a.innerText] = 1;
                  }
              }, {});

        });

Here is the html that my dropdown is rendering.

    <select id="procDateId" name="procDateId">
     <option value>1/11/2017</option>
     <option value>1/11/2017</option>
     <option value>1/10/2017</option>
     <option value>1/9/2017</option>
    </select>

The duplicates are not been removed with my code above. No luck. Kindly assist.

Your duplicates are coming from `Model.GetEmpHoursDateRange.EmphoursdateSelectList` and/or `Model.GetEmpHoursDateRange.selectedEmplhoursdate`. Why not fix at the source — K Scandrett, Jan 13 '17 at 00:07
No it is not coming from the source. I checked that. It duplicates once it renders on the page. I have spend a lot of time on it and unable to figure out what is happening. Thanks. — Baba, Jan 13 '17 at 00:11

score 0 · Answer 1 · answered Jan 13 '17 at 00:06

0

Your jQuery selector for the option appears incorrect: $('#procDateId').option --> ('#procDateId option')

Additionally, you can call remove on the option directly

jsfiddle: https://jsfiddle.net/db9zczr0/

answered Jan 13 '17 at 00:06

Hodrobond

1,665
17
18

K Scandrett · Answer 2 · 2017-01-26T05:51:18.383

0

The reason for the double up is you're using an overload with the defaultOption = Model.GetEmpHoursDateRange.EmphoursdateSelectList. The value returned is the duplicate.

The default option appears at the start of the list and its value is empty. A default option is used to communicate that no option is being chosen from the list, such as when the drop-down control represents an optional parameter.

From https://msdn.microsoft.com/en-us/library/gg548012(v=vs.111).aspx

So you will want to use a different overload, e.g.

HtmlHelper.DropDownList Method (String, IEnumerable, Object)

Then to tell the View to show the selected option using the saved session value, in the controller loop over the IEnumerable<SelectListItem> and set Selected = true for the matching item.

edited Jan 26 '17 at 05:51

answered Jan 13 '17 at 00:20

K Scandrett

16,390
4
40
65

I'd go with this overload to remove the duplicate - https://msdn.microsoft.com/en-us/library/gg537935(v=vs.111).aspx – K Scandrett Jan 13 '17 at 00:26
I want to be able to have a default selected value. On the load of the page, I want the first item in the dropdown to be the default value. Users of the application can navigate to other pages but when they return to this page I want the value they selected before leaving the page to be the current value. I am using session variable but the dropdownlist selected value has been a problem. – Baba Jan 13 '17 at 01:30
Then use something like http://stackoverflow.com/questions/23799091/html-dropdownlistfor-how-to-set-default-value to set the item as `selected`. As you can see in your current output in your question including a default option doesn't mark it with the `selected` attribute – K Scandrett Jan 13 '17 at 01:34
The link you sent me shows hardcoded data. It doesnt really show model data. – Baba Jan 13 '17 at 01:41
Your model data would be a collection of `SelectListItem`s, with one of them `SelectListItem{Text="1/11/2017", Value="1/11/2017", Selected=true}` – K Scandrett Jan 13 '17 at 01:42
`public class MyViewModel { public IEnumerable Items { get; set; } }` – K Scandrett Jan 13 '17 at 01:45
This is exactly how I did it. – Baba Jan 13 '17 at 01:52
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133044/discussion-between-k-scandrett-and-user2320476). – K Scandrett Jan 13 '17 at 01:53
Expanded answer from our discussion in chat – K Scandrett Jan 26 '17 at 05:52

Removing duplicates from a dropdownlist

2 Answers2