MVC 4 disable values in multiple dropdowns using Razor

Question

I have an issue where I'm trying to add two dropdowns per object. The objects are dynamic so I could have 6 objects, each with 2 corresponding dropdowns inside them. Inside these dropdowns, there will be 1-4 selections and the initial empty value. For the corresponding dropdowns per object, I would like it to only allow unique selections.

For example. Object 1 has 2 dropdowns with 3 selections. The user selects 1 in the first dropdown, so they can't select 1 in the 2nd dropdown. The user selects 3 in the second dropdown, so they can't select 3 in the 1st dropdown. Object 2 will have it's own 2 dropdowns that are only affected by it's own dropdowns and not the dropdowns in object 1.

I currently have it creating the dropdowns dynamically as such:

public class FormInformation
{
    public IEnumerable<SelectListItem> ListItems { get; set; }
    public string[] SelectedItems { get; set; }
    public ServiceObject serviceObject { get; set; }
}

This is how I initialize the dropdowns:

private SelectList CreateSelectListItems(int counter, List<string> clients)
    {
        if (counter == 1)
        {
            return new SelectList(new[]
                    {
                        new {id = 1, Name = ""},
                        new {id = 2, Name = clients[0]},
                    }, "Id", "Name");
        }
        if (counter == 2)
        {
            return new SelectList(new[]
                    {
                        new {id = 1, Name = ""},
                        new {id = 2, Name = clients[0]},
                        new {id = 3, Name = clients[1]},
                    }, "Id", "Name");
        }
        if (counter == 3)
        {
            return new SelectList(new[]
                    {
                        new {id = 1, Name = ""},
                        new {id = 2, Name = clients[0]},
                        new {id = 3, Name = clients[1]},
                        new {id = 4, Name = clients[2]},
                    }, "Id", "Name");
        }
        else
        {
            return new SelectList(new[]
                    {
                        new {id = 1, Name = ""},
                        new {id = 2, Name = clients[0]},
                        new {id = 3, Name = clients[1]},
                        new {id = 4, Name = clients[2]},
                        new {id = 5, Name = clients[3]},
                    }, "Id", "Name");
        }
    }

and in my cshtml I have this:

@using (Html.BeginForm())
{
    for(int i = 0; i < Model.serviceObject.forms.Count; i++)
    {
       <h2><b>Form Name:</b> @Model.serviceObject.forms[i].formName</h2>
    <div style="overflow: hidden;">
        <div style="float: left; margin-left: 50px;">
            Signer1:
            @Html.DropDownListFor(x => x.SelectedItems, Model.ListItems)
        </div>
        <div style="float: left; margin-left: 120px;">
            Signer 2: 
            @Html.DropDownListFor(x => x.SelectedItems, Model.ListItems)
        </div>
   </div>
   }
}

My problem now is that I don't know how to set the dropdowns to be unique from each other. Maybe using Jquery? I'm not too experienced in Jquery, so I'm not too sure if it really is the best solution. Thank you for your time.

Edit:

For 2 dropdowns, I have set the class as "DropDown1" and the other as "DropDown2". I'm trying to use scripting and am not really getting how to use it right now. I have this so far. I know most of it is wrong, but is this the right direction/idea? I just need to understand javascript a little more.

<script>
        var drop2 = /*What goes here?*/.DropDown2;
        $("select[class=DropDown1]").change(function () {
            var drop1Selected = parseInt(this.value);
            $("select[class=DropDown2]")
                    .html(drop2)
                    .find('option').filter(function () {
                        return parseInt(this.value) == drop1Selected;
                    }).remove();
        });
    </script>

http://stackoverflow.com/questions/5910281/jquery-dependent-drop-down-boxes-populate-how — Matt Bodily, Nov 25 '13 at 20:12
@Matt Bodily, That link looks helpful. I guess another question I have is how do I set the name of the dropdowns when using Razor? — user3002092, Nov 25 '13 at 20:33

score 0 · Answer 1 · answered Nov 25 '13 at 20:38

0

to set extra information on a dropdownlistfor you just need to add html attributes

@Html.DropDownListFor(x => x.SelectedItems, Model.ListItems, new { @class = "DropDown1" })

for reserved names you have to add @ before it(class, style, etc) for everything else you don't (id, name, etc). with a for you can only change the class. The name and id can't be overridden. Let me know if you have any other questions

answered Nov 25 '13 at 20:38

Matt Bodily

6,403
4
29
48

I feel like I'm getting close. I'm having issues with the script now. I have it nearly identical to the answer in the link that you sent me except I changed the drop2 variable to equal $("select[class=DropDown2] option"); and proceeded as such and changed the end to say equivalent instead of less than. However, it breaks at the beginning saying : "The value of the property '$' is null or undefined. Not a Function object." Do I need to add something to prevent this? – user3002092 Nov 25 '13 at 20:55
if you have added a class of DropDown2 to your dropdown then you only need .DropDown2 to select that item. what you have with option in the selector should select all of the options in the drop down. not sure if that is what you were going for – Matt Bodily Nov 25 '13 at 21:03
I've added a script to my question. I tried the .DropDown2 and there needs to be something before it, I don't know what though. – user3002092 Nov 25 '13 at 21:16
here is an article on working with dropdown lists. Hopefully something here will help. http://stackoverflow.com/questions/499405/change-the-selected-value-of-a-drop-down-list-with-jquery – Matt Bodily Nov 25 '13 at 21:26

MVC 4 disable values in multiple dropdowns using Razor

1 Answers1