jquery - Yaireo Tagify : 如果第二次选择，标签将被删除

Question

我有一个使用 Yaireo Tagify 的错误：https ://yaireo.github.io/tagify/ 。

我有一个带有在我的 value 属性中初始化的标记的输入字段和一个带有多个选项的选择字段。

如果我更改我的选择字段的值，它会更新我的标签字段（当前标签被替换）。

我不明白的是，它只有在以前从未添加过该值的情况下才有效。

例如，我的标签字段初始化为“Fêtes”，如果我添加“Foires”，“Fêtes”将被替换，如果我添加“Carnaval”，它会替换“Foires”，但如果我在选择中再次选择“Fêtes”字段，我的标签字段中没有显示任何内容...如果我选择“Marchés”，它会很好地显示在我的标签字段中，但是如果我将其更改为“Carnaval”，则不再显示任何内容，因为之前已经选择过...

这是我的脚本：

$(document).ready(function() {

    $('.js-tags').tagify();

    if ($('input.js-tags').length && $('input.js-tags').data('url') === 'event_add') {

        $('#event_category').change(function() {
            
            let newCategoryName = $(this).find(':selected').text();

            if ($('tag[title="read-only category-tag"]').length) {

                let currentCategoryTagName = $('tag[title="read-only category-tag"]').find('.tagify__tag-text').text();

                $('input.js-tags').data('tagify').removeTags(currentCategoryTagName);
            }

            $('input.js-tags').data('tagify').addTags([
                {
                    value: newCategoryName,
                    readonly: true,
                    title: 'read-only category-tag'
                }
            ]);
        });
    }
});

谢谢你的帮助。

更新：相关的 HTML

<select id="event_category" name="event[category]" class="filter-input form-control" aria-describedby="event_category_help">
    <optgroup label="Fêtes">
        <option value="1">Fêtes</option>
        <option value="10">Carnavals</option>
        <option value="9">Fêtes foraines</option>
        <option value="8">Fêtes locales</option>
        <option value="11">Fêtes médiévales</option>
        <option value="53">Repas Festifs Réveillons</option>
    </optgroup>
    <optgroup label="Foires">
        <option value="2">Foires</option>
        <option value="13">Expositions</option>
        <option value="12">Salons</option>
    </optgroup>
    <optgroup label="Marchés">
        <option value="4">Marchés</option>
        <option value="22">Marchés bio</option>
        <option value="50">Marchés de créateurs</option>
        <option value="25">Marchés de Noël</option>
        <option value="23">Marchés de potiers</option>
        <option value="44">Marchés de Producteurs</option>
        <option value="27">Marchés estivaux</option>
        <option value="26">Marchés nocturnes</option>
        <option value="24">Marchés provencaux</option>
    </optgroup>
</select>

<div class="col-md-6">
    <div class="form-group">
        <label for="event_tags" class="required">Tags *</label>
        <tags class="tagify filter-input js-tags form-control" required="" tabindex="-1">
            <tag title="read-only category-tag" spellcheck="false" tabindex="-1" class="tagify__tag tagify--noAnim" aria-readonly="true" __isvalid="true" readonly="true" value="Fêtes" contenteditable="false">
                <x title="" class="tagify__tag__removeBtn" role="button" aria-label="remove tag"></x>
                <div>
                    <span class="tagify__tag-text">Fêtes</span>
                </div>
            </tag>
            <span data-placeholder="​&quot; aria-placeholder="" class="tagify__input" role="textbox" aria-autocomplete="both" aria-multiline="false" contenteditable=""></span>
        </tags>
        <input type="text" id="event_tags" name="event[tags]" required="required" class="filter-input js-tags form-control" value="[{&quot;value&quot;:&quot;F\u00eates&quot;,&quot;readonly&quot;:true,&quot;title&quot;:&quot;read-only category-tag&quot;}]" data-url="event_add" aria-describedby="event_tags_help">
        <small id="event_tags_help" class="form-text text-muted">Tapez un tag, faites "Entrée" ou "virgule", tapez un autre tag, etc.</small>
    </div>
</div>

标签： jquerytagify