Updating the parent page's DOM elements with values modified in a modal dialog

I have a .aspx View (let's call it the Base Page), within it I have a <select> list. Beside it i have a button, when clicked it opens a modal dialog. Therein, i allow the user to add items to the DataSource for the members of the selected <select> list.

Users have to reload the page to get the new data or edited data.

Is there a clean way to handle this with MVC & jQuery. My normal approach is to (1) know the <select> element's control id on the page. Then after refreshing the modal page (which it currently does via AJAX) i woul开发者_如何学God (2) parse the new list returned, then (3) add each item in the newly parsed list to the <select> list on the Base Page.

This is tedious manual JavaScript. There must be another cleaner way.

Any suggestions?

It is not quite clear from your question what DOM elements this modal dialog contains that allow you to add items to the select list but you could subscribe for the close event of the dialog and then append the newly added item to the original select list. Something among the lines:

// read the newly added item value from some text input
var value = $('#itemName').val();
// append it to the select list
$('#SomeSelectId').append(
    $('<option/>', {
        value: value,
        text: value
    })
);