Javascript:如果你添加了一个选择,不要't不允许再次添加该选择(不允许重复)

Javascript: If you add a selection, don't allow that selection to be added again (no duplicates)

本文关键字:不允许 添加 选择 如果 一个 不要 Javascript      更新时间:2023-09-26

我目前有多种语言用于我正在进行的机场项目。

-目前,您可以从下拉菜单中选择您想要的任何语言,它将出现在列表中。工作良好。也可以删除它们。

-目标:一旦一种语言被添加到列表中,你就不能再添加了。例如,您可以点击法语的"添加语言",并根据需要多次添加。这适用于任何语言。

当前用于添加语言的js代码:

function addLanguage()
{
        var languages = $("#languages_dd").val();
        language_display = languages.split("-");
        alert(languages);
        var units = $("#units_dd").val();
        var unit_display = $("#units_dd :selected").text();
        $(".none_class").hide();
        $("#error_msg").html("");
        $("#summary").append("<li><input type='radio' name='language_item'> <span class='route_summary_field_big'>"+language_display[0]+"</span>"+unit_display+"<input type='hidden' name='languages[]' value='"+languages+"'><input type='hidden' name='units[]' value='"+units+"'></li>");
}

我对javascript不太熟悉,一直在网上搜索。我知道这将是一个有条件的,类似于:

if($("#languages_dd :selected")
{
//do something;
}
else if
//do something else;
}

任何意见都将引导我朝着正确的方向前进。

您可以将所选语言保留在一个数组中。然后,在附加到html之前,检查该值是否已经存在:

var selected_lang = new Array();
function addLanguage() {
//your code here..
    if (!$.inArray(language_display, selected_lang)) {
        selected_lang.push(language_display)
        // rest of your code to append html
    }
}

这是我提出的解决方案(可以提出建设性的批评):

function addLanguage()
{
        var languages = $("#languages_dd").val();
        language_display = languages.split("-");
        var units = $("#units_dd").val();
        var unit_display = $("#units_dd :selected").text();
        $(".none_class").hide();
        var shouldAdd = "YES";
        $("#summary li").each(function(){
            var matches = 0;
            $(this).find('input:hidden').each(function(){
                var stringVal= $(this).val();
                console.log(stringVal);
                if(stringVal.indexOf(languages) != -1){
                    matches++;
                }
                if(stringVal.indexOf(units) != -1){
                    matches++;
                }
            });
            if(matches == 2){
                shouldAdd = "NO";
            }
        });
        if(shouldAdd == "YES") {
            $("#summary").append("<li><input type='radio' name='language_item'> <span class='route_summary_field_big'>"+language_display[0]+"</span>"+unit_display+"<input type='hidden' name='languages[]' value='"+languages+"'><input type='hidden' name='units[]' value='"+units+"'></li>");
        }
        $("#error_msg").html("");
}