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

Answer 2

您将不得不改变生成选项的方式。它们需要来自一个对象，并且在该对象上，您将能够存储值，标签以及之前选择的值。

像这样的东西，一个存储你的选项的数组。

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

因此，您可以在创建选项列表时循环遍历它们。

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

选择一个选项后，只需查看选项数组，找到它并将其标记为已选中。

Answer 3

从数组而不是硬编码的HTML字符串构建选项。如果先前选择了其中一个选项，则从阵列中弹出相应的项目，以便在从阵列构建新选择时不存在该项目

Answer 4

试试这个：

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

Answer 5

使用以下代码。有一个所有下拉项目的数组。查找添加的下拉菜单中选择的元素。只添加那些。

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

感谢。

jQuery从选择框中删除选项

5 个答案: