CODEWITHSUNDEEP
javascriptjqueryhtml
user1117313
user1117313

Reputation: 1985

jQuery remove options from select box

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.net/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?

Upvotes: 3

Views: 1100

Answers (5)

kalai
kalai

Reputation: 29

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.

Upvotes: 0

Alex Char
Alex Char

Reputation: 33228

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

Upvotes: 4

danwellman
danwellman

Reputation: 9273

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

Upvotes: 1

Misrab
Misrab

Reputation: 354

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

Upvotes: 0

GillesC
GillesC

Reputation: 10874

You're going to have to change the way you generate your options. They would need to come 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.

Upvotes: 3

Related Questions