选择二添加/更新输入变化

-1

Label: <input class="default-ele" type="text"/> 
<select class="some-select"> 
    <option>-- None --</option> 
</select>

和一些JS/JQuery的如下...

$(document).ready(function() { 

    $(`.${type}-default`).select2({ 
    theme: 'bootstrap' 
    }); 

    $(document).on('change', '.default-ele', function() { 
    var newVal = $(this).val(); 
    var selAdd = new Option(newVal, newVal); 
    $('.some-select').append(selAdd).trigger('change'); 
    }); 

});

这一切除了如果你在输入中输入一个值然后点击选择并且光标仍然在输入中，该值不存在，直到你将焦点从选择移开并返回到它。有没有超时或其他方式来获得显示值，当输入更改后立即点击选择？

TIA

来源

2017-08-01 D Durham

使用插件提供的事件，并在初始化select2下拉列表时将它们传递给选项。请参阅https://select2.github.io/options.html#events – kyle

为什么没有按钮将其添加到下拉菜单中？ –

这是动态的（为简洁起见，我修剪了一些代码）。其中一个目标是可用性，并将点击次数降至最低。另外，select在输入值时已经初始化。 –

我会建议使用keypress事件来触发'选择'刷新功能。

像下面这样的东西。

这应该在您提起钥匙后立即更新输入上的触发回调。

$(document).ready(function() { 

    $(`.${type}-default`).select2({ 
    theme: 'bootstrap' 
    }); 

    $(document).on('keyup', '.default-ele', function() { 
    var newVal = $(this).val(); 
    var selAdd = new Option(newVal, newVal); 
    $('.some-select').append(selAdd).trigger('change'); 
    }); 

});

将其标记为如果它帮助一个答案。

来源

2017-08-01 16:11:13

非常感谢，这似乎工作，所以我会接受，并投票，但它似乎可能会影响整体性能，它仍然看起来像改变事件应该发生之前选择下拉菜单发生无论 - 但显然它不;-( –

选择二添加/更新输入变化

回答

相关问题