javascript - 是否可以更改语义-ui-dropdown 上的“添加”文本？

Question

我想知道这是否可能，如果可以，我应该更改什么设置？

键入未在下拉列表中列出的值时会出现添加

$(document).ready(function () {

    $('.ui.dropdown')
        .dropdown({
            clearable: true,
            allowAdditions: true,
            hideAdditions: false,

            onAdd: function (addedValue, addedText, $addedChoice) {
                console.log('teste');
            },

            onChange: function (value, text, $choice) {
                $('.ui.dropdown').dropdown('clear');
            }
        });
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<select id="dropdownHospital" name="hospitais" class="ui search selection dropdown"
style="margin:0">
<option hidden selected value="">Hospitais</option>
<option value="1">Hospital São Luis</option>
<option value="2">Hospital Sírio Libanês</option>
<option value="3">Hospital Albert Einstein</option>
<option value="4">Hospital ABC</option>
</select>

标签： javascriptjquerysemantic-ui

Answer 1

add文本是由库硬编码的。因为它是在 DOM 中呈现的。您可以使用一些 jQuery 来操作它。

该解决方案并不完美并且很hacky，但它给出了解决方法的提示。它现在只在第二次击键后删除添加。

<div tabindex="-1" class="menu transition visible" style="display: block !important;">
    <div class="addition item selected" data-text="xcx" data-value="xcx">Add <b>xcx</b>
    </div>
</div>

这是为添加选项呈现的 HTML。当我们将 keyup 事件附加到下拉列表时，我们可以使用 jQuery 更改添加文本text。见片段。

$('.ui.dropdown').dropdown({
clearable: true,
allowAdditions: true,
hideAdditions: false,

onAdd: function(addedValue, addedText, $addedChoice) {
  console.log('teste');
},

onChange: function(value, text, $choice) {
  $('.ui.dropdown').dropdown('clear');
}
});

$('.ui.dropdown').on('keyup', 'input:text', function() {
  const element = $(this).parent('.ui.dropdown').find('div.menu.transition.visible > div.addition.item.selected');
  element.text(element.attr('data-value'));
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<select class="ui dropdown search selection ">
  <span class="text">add options</span>
  <i class="dropdown icon"></i>
</select>

解决方案是用于<span class="text">add options</span>更改下拉列表的文本。

快速浏览文档会带来很多乐趣： https ://semantic-ui.com/modules/dropdown.html