Trigger change after items are selected in a multiple select

Let's say I have a multiple select box:

<select id="sel" multiple="multiple">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="9">Nine</option>
    <option value="10">Ten</option>
</select>

To select items, you can hold down Ctrl and click on individual items. I want to save the data from this select box after the user is done selecting items. How can I do that开发者_StackOverflow?

I thought of using setTimeout and saving 500ms after the onChange event is triggered, but I don't know if this is the best idea.

$('#sel').change(function(){
    setTimeout(saveData, 500);
});

I know I could add a 'Save' button, but I want to save the data on the fly.

What is the best way to save data from a multiple select box on the fly (after the user selects items)?

---

I would do it onchange, and after so much time has passed save it like you have, only thing I would change is resetting the timeout on each change so it only does it on the final onchange.

Something along these lines.

var changeTimeout;

$('#sel').change(function(){
    clearTimeout(changeTimeout);
    changeTimeout = setTimeout(function(){saveData()}, 1000);
});