根据“使用Java脚本的第一次”中的选择从第二个下拉菜单中删除项目

Question

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);
}

Answer 1

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>

Answer 2

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

Answer 3

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/

Answer 4

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 .