Remove an item from a dropdownlist based on the item that is selected in another dropdownlist in ASP MVC

Question

0.00/5 (No votes)

See more:

Hi , I am new to asp.net mvc , May I know how can I check if the dropdown value is existed in the previous dropdown, if exist then remove the value , if not have the value remain at the dropdown.
Eg: I have cheese , chocolate , strawberry in the dropdown selection , then I select cheese , so I would like cheese to be remove from the next dropdown selection. The dropdown I am using is kendo. Thank you.
The code below in under view

C#

<select class="form-control "
name="Choice[@ViewBag.CakeIndex].Category">
               @foreach (var flavor in ViewBag.Flavour)
               {
                   <option value="@flavor.id">@flavor.name</option>
               }
           </select>

What I have tried:

I had tried using cakes.Items.Remove(flavor); but i am unsure which variable should I use to remove it

Posted 15-Nov-16 19:53pm

Member 12852998

Updated 18-Nov-16 0:03am

v9

Add a Solution

Comments

Suvendu Shekhar Giri 16-Nov-16 2:24am

You can do following to find the corresponding item-

yourDropdown.Items.FindByValue("ValueToFind") //pass the selected value here

Member 12852998 16-Nov-16 2:25am

May I know where should i put this code ?

Suvendu Shekhar Giri 16-Nov-16 2:38am

just before the line where you have written the code to remove the item

F-ES Sitecore 16-Nov-16 5:35am

What does "previous dropdown" mean? Is it a dropdown on a previous page? On the same page? Are you looking to do this using javascript or on a form submission? Do you just want the option removed from the dropdown or do you want it removed from the ViewBag the dropdown gets its data from?

You haven't given enough of an explanation for what you're looking to do for anyone to give an answer.

Member 12852998 16-Nov-16 20:26pm

Currently, I am having a button called addcake which enables the user to select more than one cake , so when the user clicked on the addcake button , it would populate another form which is exactly the same as the default one , both of them have a dropdown list that populate the same data , but I would like that if either one of them choose a value , then it would not show up in the other dropdownlist.

Both javascript or on a form submission will be fine , as long that it could work

Removed from the dropdown

John C Rayan 16-Nov-16 7:19am

You mean cascade dropdown lists in the same page?

Member 12852998 16-Nov-16 20:16pm

yup but that are poulated in different views which means it is on the same page but in mvc , it is seperated

Er. Puneet Goel 18-Nov-16 3:43am

Use Jquery...Let me know if you need help in that.

Member 12852998 18-Nov-16 3:58am

Hi, could you help me ? I had tried many examples on the internet but still can't work

Er. Puneet Goel 18-Nov-16 4:00am

Please post what you have tried with your html

Member 12852998 18-Nov-16 4:04am

$(function () {
$('select').on('change', function () {
$("#row option:selected").remove();

});
});

and

$$('select').each(function (item) {
Event.observe(item, 'change', function (e) {
var el = e.srcElement;
var val = el.options[el.selectedIndex].innerHTML;
$$('select').each(function (item) {
if (item != el) {
for (var i = 0; i < item.options.length; i++) {
if (item.options[i].innerHTML == val) {
item.removeChild(item.options[i]);
}
}
}
});
});
});

Er. Puneet Goel 18-Nov-16 4:12am

Please post your html also so that we can get your structure to provide you better solution.

I hope you solve this. Idea is, on change of 1st dropdown, get the value selected. Now loop through the 2nd dropdown to see if item with same value exits or not. If yes, remove that.

Member 12852998 18-Nov-16 4:20am

 List<cake>
        Cake = ViewBag.Cakes;

    
        <label>Cakes</label>
        <select class="form-control required" id="row" name="cakes">
            <option value="">Choose Cake</option>
            @foreach (Cake cakever in Cakes)
            {
			  <option value="@cakever.id">@cakever.name</option>
            }
        </select>

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Er. Puneet Goel · Accepted Answer · 2016-11-18T00:03:00

Solution 2

$('select#select1').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;

var exists = false;
$('select#select2 option').each(function () {
debugger;
if (this.value == valueSelected) {
exists = true;
$("select#select2 option[value='" + valueSelected + "']").remove();
}
});

});

Posted 18-Nov-16 0:03am

Er. Puneet Goel

Comments

Member 12852998 20-Nov-16 20:55pm

Sorry but the code for the dropdown is only one line which uses the foreach to loop it, may I know where can I define the select1 and select2?

Er. Puneet Goel 21-Nov-16 0:41am

Select1 and select2 are the dropdowns. For implementation see the fiddler below:
https://jsfiddle.net/erpuneetgoel507/eum8m92v/