I want to add the same select box multiple times with jQuery. Here's the code I'm trying:

$(".add").on("click", function(){ 
    $select_box = '<div><select><option value="v1">Value 1</option><option value="v2">Value 2</option><option value="v3">Value 3</option></select></div>';

 $('.box').append($select_box);

});

Demo: /

The above code works fine. However, I want to check if an option value has been selected in any of the previous select box, it should not appear in the later select boxes.

For example, if option 1 is selected in the first select box, and another select box is added, it should not list the option 1 in it.

How this can be done?

I want to add the same select box multiple times with jQuery. Here's the code I'm trying:

$(".add").on("click", function(){ 
    $select_box = '<div><select><option value="v1">Value 1</option><option value="v2">Value 2</option><option value="v3">Value 3</option></select></div>';

 $('.box').append($select_box);

});

Demo: http://jsfiddle/hC578/

The above code works fine. However, I want to check if an option value has been selected in any of the previous select box, it should not appear in the later select boxes.

For example, if option 1 is selected in the first select box, and another select box is added, it should not list the option 1 in it.

How this can be done?

• javascript
• jquery
• html

Share Improve this question Follow asked May 28, 2014 at 8:34 user1117313user1117313 1,98599 gold badges2626 silver badges3636 bronze badges 1

• 1 u need logic or code? – Innovation Commented May 28, 2014 at 8:39

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Try this:

html

<div class="box">


</div>

<button class="add">Add</button>

js

$(".add").on("click", function(){ 
    $select_box = '<div><select><option value="v1">Value 1</option><option value="v2">Value 2</option><option value="v3">Value 3</option></select></div>';
var ddl = $($select_box).children();

    var a= $("select").val();


    if(a!="")
        $("option[value='" + a + "']").remove();

 $('.box').append($select_box);


});

fiddle

Ok i change a bit, try this version please:

js

$(".add").on("click", function(){ 
    $select_box = '<div><select><option value="v1">Value 1</option><option value="v2">Value 2</option><option value="v3">Value 3</option></select></div>';
var ddl = $($select_box).children();

    var a= new Array();
    var i=0;
    $("select").each(function(){               
        a[i] = $(this).val();
        i++;
    });

    if(a.length>0){
        for(var j=0; j<a.length; j++){
            $(ddl).find("option[value='"+a[j]+"']").remove();
        }
    }

 $('.box').append(ddl);


});

fiddle

For your last request:

js

$(".add").on("click", function(){ 
    $select_box = '<div><select onchange="ddlChange(this);"><option value="v1">Value 1</option><option value="v2">Value 2</option><option value="v3">Value 3</option></select></div>';
var ddl = $($select_box).children();

    var a= new Array();
    var i=0;
    $("select").each(function(){               
        a[i] = $(this).val();
        i++;
    });

    if(a.length>0){
        for(var j=0; j<a.length; j++){
            $(ddl).find("option[value='"+a[j]+"']").remove();
        }
    }

 $('.box').append(ddl);


});

window.ddlChange = function(ddl){

    var a= new Array();
    var i=0;
    $("select").each(function(){               
        a[i] = $(this).val();
        i++;
    });

    if(a.length>1){
        for(var j=0; j<a.length; j++){
            $(ddl).find("option[value='"+a[j]+"']").remove();
        }
    }

 $('.box').append(ddl);


};

fiddle

You're going to have to change the way you generate your options. They would need to e from an object and on that object you will be able to store the value, label but also if it was previously selected.

Something like this, an array which stored your options.

var options = [
    {label: "a", value: "A", selected: null},
    {label: "a", value: "A", selected: null},
    {label: "a", value: "A", selected: null},
];

So then you can loop over them when creating the list of options.

var options_html = "";

options.forEach(function(option) {
    // only use if selected is null
    if (option.selected === null) {
        options_html += "<option value='"+option.value+"'>"+option.label+"</option>";
    }
});

When an option is selected just go over the options array, find it and mark it as selected.

Build the options from an array instead of a hard-coded HTML string. When one of the options is selected previously, pop the corresponding item out of the array so that it is not present when the new selects are built from the array

Try this:

$(".add").on("click", function () {
    var box = $('.box');

    // append new one
    box.append('<div><select><option value="v1">Value 1</option><option value="v2">Value 2</option><option value="v3">Value 3</option></select></div>');

    // remove others with selected option
    $('option[selected="selected"]', box).parent().remove();
});

Use the below code. have an array of all dropdown items. Find elements selected in added dropdowns. Add only those.

$(document).on("click",".add", function(){ 
    var options=[
        {label:"1",value:"1"},
        {label:"2",value:"2"},
        {label:"3",value:"3"}
    ];
    var selectedVal=[];
    $("select.dropdown").each(function(){
        selectedVal.push($(this).val());
    });
    options=$.grep( options, function( val, i ) {
        return $.inArray(val.value,selectedVal)==-1;
    });
    var dropdown="<select class='dropdown'>";
    options.forEach(function(ele){
        dropdown+="<option value='"+ele.value+"'>"+ele.label+"</option>";
    });
    dropdown+="</select>";
    $(".box").append(dropdown);
});

Thanks.