Question

How can I refresh jquery multiselect when the last option is selected with new values? Like I have the below options in my multiselect:

<select id="positions" multiple="multiple">
    <option value="0">Programmer</option>
    <option value="1">Tester</option>
    <option value="2">Manager</option>
    <option value="3">Admin</option>
    <option value="4">Load all other</option>    
</select>

If the user selects the “load all other” option from the multiselect box, then this multiselect should be reinitialized with different values.

<select id="positions2" multiple="multiple">
    <option value="0">test1</option>
    <option value="1">test2</option>
    <option value="2">test3</option>
    <option value="3">test4</option>    
</select>

Above is the resultant options that the multiselect will have after selecting load all other option

Answer 1

There are many ways you can do this. Off the top of my head I would use the html function. Set an id to the option that needs to clicked and add an event handler to it. Would you like me to write the code for you?

UPDATE

This will replace the code in the first select. If you simply want to hide it and add a new select element then use the show/hide function. Dont forget to add id="option" attribute to the option that needs to be clicked.

UPDATE – I have added comments to help you understand what the script is doing

// Set the click event of the option (change '#option' to the options id)
$('#option').click(function(){
    // Alter the HTML content of the select
    $('#positions').html('<option value="0">test1</option><option value="1">test2</option><option value="2">test3</option><option value="3">test4</option>');
});