javascript - jQuery 从选择框中删除选项

Question

我想用 jQuery 多次添加同一个选择框。 这是我正在尝试的代码:

$(".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);

});

演示: http://jsfiddle.net/hC578/

上面的代码工作正常。但是，我想检查是否在前面的任何选择框中选择了一个选项值，它不应该出现在后面的选择框中。

例如，如果在第一个选择框中选择了选项1，然后添加了另一个选择框，则不应在其中列出选项1。

如何做到这一点？

Answer 1

试试这个:

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

好的，我稍微改一下，请试试这个版本:

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

对于您的最后一个请求:

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