javascript - 在添加到下拉列表之前检查重复的名称

Question

我有两个问题:

1. 我希望用户在下拉列表中添加值，但在此之前我使用此函数检查该值是否已存在于下拉列表中:

    function IsNameAlreadyPresent(List,Name){
        $.each($("'#'+List option"),function(i,e){
            if(e.innerHTML == Name){
               return true;
          }
      });
    }
   
   
    function AddOptionName() {
       var Name = $("#txtName").val(); 
       if(IsNameAlreadyPresent(List,Name)) {
            alert("Name \"" + Name + "\" already exists. \nPlease type an unique name.")
         }
       else{       
               AddNewOption(Name);
           }
    }
   

我想在代码中多次使用相同的函数，通过传递下拉列表的 id 和要输入的名称来检查输入的值是否唯一。但不知怎的，这不起作用。

如何将id作为参数传递($("'#'+List option")？

我也使用相同的函数来编辑选项的文本。但不知何故，如果用户单击“编辑”并且他不想更改文本并单击“确定”，则会发出警告该选项已存在。 该选项只有一次，包括在弹出窗口中打开的选项。如何检查这个？

 var x = document.getElementById("List");
     var l_sName = x.options[x.selectedIndex].text;
   $("#List option[value="+l_sName+"]").remove();

Answer 1

1. 您的选择器错误，应该是$("#"+List+"option")。另外，$.each() 内的 return 不会从函数中返回，但如果为 false，则会中断 $.each()。将您的 IsNameAlreadyPresent(List,Name) 更改为:

   function IsNameAlreadyPresent(List, Name) {
       var result = false;
       $.each($("#"+List+" option"), function (i, e) {
           if (e.innerHTML == Name) {
               result = true;
               return false;
           }
       });
       return result;
   }
   

2. 对于这部分，您可以添加一个要排除检查的名称，例如:

   function IsNameAlreadyPresent(List, Name, Excluded) {
       var result = false;
       $.each($("#"+List+" option"), function (i, e) {
           if (e.innerHTML == Name && e.innerHTML != Excluded) {
               result = true;
               return false;
           }
       });
       return result;
   }
   
   function AddOptionName(Excluded = "") {
       var Name = $("#txtName").val();
       if (IsNameAlreadyPresent(List, Name, Excluded)) {
           alert("Name \"" + Name + "\" already exists. \nPlease type an unique name.")
       } else {
           AddNewOption(Name);
       }
   }
   

   然后使用 AddOptionName( $("#"+List+"option:selected").html() );

调用它