選擇二添加/更新輸入變化

-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

非常感謝，這似乎工作，所以我會接受，並投票，但它似乎可能會影響整體性能，它仍然看起來像改變事件應該發生之前選擇下拉菜單發生無論 - 但顯然它不;-( –

選擇二添加/更新輸入變化

回答

相關問題