Question

我正在使用Chosen JS库将HTML Selection表单转换为Tag输入字段。

然后我需要允许我的应用程序动态添加新的标签选择选项。

我能够通过下面的演示代码和此COdePen.io演示实现此目标http://codepen.io/jasondavis/pen/VLMzxG?editors=101

我需要帮助的是，当您单击演示按钮以插入新标签选项时，它允许您反复继续添加重复选项。

我想修改我的addTagSelectionOptions(tagName)函数，以便首先检查以确保标记不在选择列表中。

$( document ).ready(function() {

  // init ChosenJS on Tag input field
  $('#task-tags-input').chosen({
    no_results_text:'Oops, nothing found!',
    width:"95%"
  });

  // Add new Tag options to Selection field
  function addTagSelectionOptions(tagName){
    var $taskTagsInpuitEl = $('#task-tags-input');
    // add new Tag selection options 
    $taskTagsInpuitEl.append('<option value="'+tagName+'">'+tagName+'</option>');

    // trigger Chosen to update after adding new options so that they show up!
    $taskTagsInpuitEl.trigger("chosen:updated");     
  }

  // Add new Tag selection options when button clicked
  $('#add-tags-btn-1').on('click', function() {
    addTagSelectionOptions('PHP');
    addTagSelectionOptions('JavaScript');
  });

  // Add new Tag selection options when button clicked
  $('#add-tags-btn-2').on('click', function() {
    addTagSelectionOptions('MySQL');
    addTagSelectionOptions('Oracle');
  });  

  // Add new Tag selection options when button clicked
  $('#add-tags-btn-3').on('click', function() {
    addTagSelectionOptions('CSS');
    addTagSelectionOptions('HTML');
  });
});

Answer 1

您可以在附加之前检查option value是否出现

if (!$taskTagsInpuitEl.find("option[value" + tagName + "]").length) {
      $taskTagsInpuitEl.append('<option value="' + tagName + '">' + tagName + '</option>')

    }

<强> DEMO

向ChosenJS选择字段动态添加选项，但避免添加重复项

1 个答案: