CODEWITHSUNDEEP
c#javascriptvisual-studio-2010asp.net-mvc-3
anouar
anouar

Reputation: 317

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

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>

Upvotes: 1

Views: 7274

Answers (4)

Hau Le
Hau Le

Reputation: 677

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

Upvotes: 2

Dimitar Dimitrov
Dimitar Dimitrov

Reputation: 15138

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.

Upvotes: 2

Andre Calil
Andre Calil

Reputation: 7692

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

Upvotes: 3

Matt Houser
Matt Houser

Reputation: 36073

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

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

Upvotes: 2

Related Questions