CODEWITHSUNDEEP
javascriptdrop-down-menu
Iti Tyagi
Iti Tyagi

Reputation: 3661

Remove item from second dropdown based on selection in First using Javascript

I have four dropdown, and I am manually filling them.

Now I want to add a javacsript that when I select first dropdown option, then in the second third fourth dropdowns, that item or option can be removed.

And same flow goes for second third and fourth and so on.

I am giving my code but till now, it is not working fine.

I am only tring for the first ladder, that is when option in first is selected then item removed from second, third and fourth dropdowns.

 function RemoveItems(){
     var List1 = document.getElementById("ddlSortField");
     var sortList1 = List1.options[List1.selectedIndex].text;

     var List2 = document.getElementById("ddlSortField2");
     var sortList2 = List2.options[List2.selectedIndex].text;
     List2.options.remove(sortList1);

     var List3 = document.getElementById("ddlSortField3");
     var sortList3 = List3.options[List3.selectedIndex].text;
     List3.options.remove(sortList2);

     var List4 = document.getElementById("ddlSortField4");
     var sortList4 = List4.options[List4.selectedIndex].text;
     List4.options.remove(sortList3);
}

Upvotes: 1

Views: 5881

Answers (4)

Muhammad Omair
Muhammad Omair

Reputation: 797

Use jQuery to remove option

$(document).ready(function(){
    $('#ddlSortField').change(function(){
        var index = $("#ddlSortField option:selected").val();

        $('#ddlSortField2 option:eq(' + index + ')').remove();
        $('#ddlSortField3 option:eq(' + index + ')').remove();
        $('#ddlSortField4 option:eq(' + index + ')').remove();
 });
});

Note in your html your option value must be same like this:

<select id="ddlSortField">
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>

<select id="ddlSortField1">
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>

Upvotes: 1

RobG
RobG

Reputation: 147403

In your code:

> function RemoveItems(){

Variable names starting with a capital letter are, by convention, reserved for constructors, so:

function removeItems() {

>     var List1 = document.getElementById("ddlSortField");
>     var sortList1 = List1.options[List1.selectedIndex].text;

So sortList1 will be a string.

>     var List2 = document.getElementById("ddlSortField2");
>     var sortList2 = List2.options[List2.selectedIndex].text;
>     List2.options.remove(sortList1);

The remove method of the options collection takes a single parameter that is an index of one of the options. You have not shown what the value of sortList1 nor how many options List2 has. Note that the options collection is live, so if you remove an option, the indexes of other options may be adjusted so that they are contiguous from 0 to options.length - 1.

Upvotes: 1

gmaliar
gmaliar

Reputation: 5479

I've made a slightly different one than @Muhammad Omair's, this one is a bit more dynamic. Note that this is jQuery

var removeSelection = function(select) {
    $('select').filter(':not(#' + select.attr('id') + ')').each(function() {
        var index = select.find(':selected').index();
        $(this).find('option:eq(' + index + ')').remove();
    });
};

$(function() {
    $('select').change(function() {
        removeSelection($(this));
    });
});

And here's a jsfiddle of it http://jsfiddle.net/cA3F9/

Upvotes: 1

Samuel Caillerie
Samuel Caillerie

Reputation: 8275

You can use such code : jsFiddle.

Basically, you first bind the change event to each list and when you change the value you hide these elements in all lists after...

Upvotes: 1

Related Questions