Need help binding added option to select list

I need to disable some options in a select list after I have dynamically added the options.

My select list is dynamically build when selecting an item from another list.

The list is created in PHP then returned to my javascript using $.ajax call. Once the options are added to my list, I need to loop through the options and disable certain options.

I'm able to add the options, but I'm not able to disable specific options. I think this is becuase the options are not bound to the DOM (or something like that).

This is the code I use now:

// HTML
<select id='selectlist_store' name='selectlist_store' size='6' multiple='multiple'></select>


// Javascript
// Populate store multi-select list
jQuery('#selectlist_city').live('change', function(){
  populateStoreListBox(jQuery(this).val(),  function(list) {
    // Add options to list
    jQuery('#selectlist_store').html(list);
    // Disable specific element
    jQuery('#selectlist_city option [value=56]').attr('disabled','disabled');
  });
});


function populateStoreListBox(country_id, callback){
  jQuery.ajax({
    url: (...),
    data: (...),
    dataType: 'html',
    success: (function(city_list) {
开发者_StackOverflow社区        callback(city_list);
  })
}); 

What do I need to do in order to disable some options after I've added them?

One solution would maybe to return a JSON array instead of HTML, then loop through the array and dynamically build my new option list and disable the the options I want to disable.

But is there another way?

---

You need to remove the space before [

jQuery('#selectlist_city option[value=56]').attr('disabled','disabled');

http://jsfiddle.net/pYBqm/