How to remove an item in DropDownList in ASP MVC using JavaScript

Question

I am developing an ASP .Net MVC 3 application using C# and SQL Server 2005.

In a view, I have a DropDownList, a button.

How can I remove an item from the DropDownList for each click of the button.

I try to use javascript, but I think that's not working because when I click on the button, nothing happens.

This is the code :

<%:Html.Label("Poste :")%>
<%:Html.DropDownListFor(
    model => model.SelectedPoste,
    Model.PostesItems,
    new { @id = "poste" })%>

<div>
    <input type="submit"
           value="Enregistrer"
           id="btnSave"
           onclick="remove()" />
</div>

<script type="text/javascript">    
    function remove() {
        var rm = document.getElementById('btnSave');
        var poste = document.getElementById('poste');

        poste.removeItem(); 
    }
</script>

Can you confirm that the HTML generated from your Html.DropDownListFor actually has an ID of "poste" and not "SelectedPoste" ? — Matt Houser
– Matt Houser, Commented May 23, 2013 at 19:01
yes,,i tried that with other JS code but to disable a dropdownlist and it s worked — anouar
– anouar, Commented May 23, 2013 at 19:08
May I post an answer that uses jQuery library? It would make this much easier. — Andre Calil
– Andre Calil, Commented May 23, 2013 at 19:09

Andre Calil · Accepted Answer · 2013-05-23 21:07:44Z

3

using jQuery

<select id="poste">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<br />

<input type="button" id="btnSave" value="Remove current item" />

<script type="text/javascript">
    $(function () {
        $('#btnSave').click(function () {
            $('#poste option:selected').remove();
            return false;
        });
    });
</script>

EDIT: binding the click event using jQuery

edited May 23, 2013 at 21:07

answered May 23, 2013 at 19:13

Andre Calil

7,69236 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

Andre Calil Over a year ago

@anouar Have you referenced jQuery script?

Dimitar Dimitrov Over a year ago

Well if you go with jquery, you might as well bind the even of the button here instead of mixing it with the html :) +1 though

Andre Calil Over a year ago

@DimitarDimitrov there you go =)

Andre Calil Over a year ago

@anouar Updated, there's a new return false; there now

Andre Calil Over a year ago

@anouar You must implement this action inside that function(){...} over there. It won't do it magically =)

|

Matt Houser · Accepted Answer · 2013-05-23 19:54:53Z

2

The generated HTML will give the select element an ID of "SelectedPoste", not "poste" as you are attempting to set.
Use remove to remove an item.

Change your javascript to be:

var poste = document.getElementById('SelectedPoste');

poste.remove(poste.selectedIndex);

Edit: The generated HTML for the select will be:

<select id="poste" name="SelectedPoste">...</select>

Either of these two lines will get that elements:

var poste = document.getElementById('poste');

or

var poste = document.getElementById('SelectedPoste');

(Atleast in IE10)

Then to remove the selected item from the list, do:

poste.remove(poste.selectedIndex);

This does not remove the button :)

Edit 2: Like Dimitar's answer, you need to change your function name from remove to something else.

Once you do that, my code above works in IE and Chrome.

edited May 23, 2013 at 19:54

answered May 23, 2013 at 19:09

Matt Houser

36.3k6 gold badges78 silver badges93 bronze badges

3 Comments

anouar Over a year ago

please look at my code, i don't have a select, how i will put the name ?

Matt Houser Over a year ago

Your Html.DropDownListFor will generate the <select> tag that I mention above

Matt Houser Over a year ago

Google Chrome will remove the button with my javascript code above. IE works as expected.

Dimitar Dimitrov · Accepted Answer · 2013-05-24 05:33:23Z

2

Using vanilla JavaScript you can do:

<script type="text/javascript">    
    function removeOption() {
       var posteElement = document.getElementById('poste');        
       var currentIndex = posteElement.selectedIndex;

       posteElement.removeChild(posteElement[currentIndex]);
       return false;
    }
</script>

That's all you need. Also make sure you rename your function to anything other than remove():

<input type="submit"
       value="Enregistrer"
       id="btnSave"
       onclick="removeOption()" />

Check out this (not very nice inline-fiddle).

However I'd strongly suggest at least looking into a library such as jquery, (this would be much easier than with vanilla.js). Check out Andre's answer.

edited May 24, 2013 at 5:33

answered May 23, 2013 at 19:01

Dimitar Dimitrov

15.2k9 gold badges55 silver badges82 bronze badges

6 Comments

Andre Calil Over a year ago

poste is the entire select, not the option. OP wants to remove the currently selected option

Andre Calil Over a year ago

@DimitarDimitrov Glad to help. +1 for the answer and for the kindness

anouar Over a year ago

Still the same problem :(((

anouar Over a year ago

@DimitarDimitrov sorry for the late,,,your solution is working but the page is refreshing after the click of the button

Dimitar Dimitrov Over a year ago

@anouar Ok firts of all remove you previous comments because thi thread is too long ... Second, what exactly disappeared when you're using jquery, how abou you make a fiddle with your issue and have me take a look at it

|

Hau Le · Accepted Answer · 2013-05-24 08:59:12Z

2

Try this:

$("#poste option[value='X']").each(function() {
    $(this).remove();
});

Or to be more terse, this will work just as well:

$("#poste option[value='X']").remove();

Example:

$("#btnSave").click(function(){
   $("#poste option[value='X']").remove();
});

Remember to use JQuery :)

edited May 24, 2013 at 8:59

answered May 24, 2013 at 8:53

Hau Le

6673 gold badges18 silver badges45 bronze badges

Collectives™ on Stack Overflow

How to remove an item in DropDownList in ASP MVC using JavaScript

4 Answers 4

16 Comments

3 Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

16 Comments

3 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related