如何防止 get value selected 选项在 select2 函数中重复？

Question

我有使用 jQuery select2 的 select 函数。我在显示从上一个表单中选择的值时遇到问题。

在我的页面详细信息中，我想显示用户选择的选定值。如果他们愿意，他们也可以更新。

如何根据我从 api ${e.tag.id} 检索到的 id 而不是像这样显示它？

-Red
-Yellow
-New  -> selected 
-Others

应该只显示一次New。

我将首先从我的 api url 中获取所有值，然后将其附加到 id=tag。如果用户还没有放置标签，它将为他们显示select tag，但如果用户之前已经插入了标签，则值将显示在<select> 框区域。但我不希望它出现在 <option> 上，因为它会被重复。

这是我尝试过的

  $('#tag').select2({
                placeholder: "Select Tag",
                allowClear: true
   });

 const getTagList = () =>{
        axios.get(`url`)
            .then(function (res) { 
                if(res.data.status == 'success')
                    {
                        if(res.data.result.length > 0)
                        {
                            res.data.result.map((e) => {
                                $('#tag').append(`<option value="${e.tag.id}">${e.tag.title}</option>`);
                            });
                        }
                    }
                });
        
        }

if(e.tag.id == '0'){ tagInfo+= ` <option value="" hidden>Select Tag</option>`;}
 else { tagInfo+= `<option value="${e.tag.id}" selected >${e.tag.title}</option>`;}


                    

  <!-- list tag -->

    <div class="row mb-4 align-items-end">
      <div class="col-md-10">
        <div class="form-group">
          <label class="form-label">Tag</label>
         <div class="form-control-wrap">
           <select class="" name="tag" id="tag">
               ${tagInfo}
           </select> 
        </div>
       </div>
      </div>         
    </div>

我已经从数据库中读取了值并将其显示在文本中。但我不希望它坐在如果值与它应该只出现一次相同的位置。相反，它应该只显示为选中状态。但是使用我当前的代码，它在列表中出现了两次。

Answer 1

我想如果你可以这样做。

=> 用于绑定您的选择

 const getTagList = () =>{
        axios.get(`url`)
            .then(function (res) { 
                if(res.data.status == 'success')
                    {
                        if(res.data.result.length > 0)
                        {
                            
                            res.data.result.map((e) => {
                                if($("#tag option[value='"${e.tag.id}"']").length==0){
                                      $('#tag').append(`<option value="${e.tag.id}">${e.tag.title}</option>`);
                                }
                            });
                        }
                    }
                });
        
        }