---
title: Change Listener
nav_title: Change Listener
tags: demo
---


{% from "demo.njk" import demo %}



{% set label %}
<label class="h2 mb-3">Example</label>
<p>Listen for 'change' events on the original input/select and update Tom Select accordingly</p>
{% endset %}

{% set html %}
<input type="text" id="input-change" value="original value" autocomplete="off">
<button type="button" class="btn btn-sm btn-success" id="change-input">Change original input</button>
{% endset %}

<script>
{% set script %}

var input = document.getElementById('input-change');
new TomSelect(input,{
	plugins: ['change_listener'],
});
document.getElementById('change-input').addEventListener('click',function(evt){
	evt.preventDefault();
	evt.stopPropagation();

	input.value = 'new value';
	var evt = document.createEvent('HTMLEvents');
	evt.initEvent('change', false, true);
	input.dispatchEvent(evt);
});
{% endset %}
</script>

{{ demo( label, html, script ) }}



<h2>Plugin Configuration</h2>
<p>No additional configuration settings for this plugin</p>