Question

I’ve added Close as an option, then I would like to trigger it to close the dialog if clicked. In addition I would like to set “display: none” for span with class “ui-icon ui-icon-checkbox-off ui-icon-shadow”, to make it look like a button.

Any advice?

http://jsfiddle.net/N5r4A/

Answer 1

To hide the check-boxes:

#select-choice-0-menu span.ui-icon {
    display: none;
}​

http://jsfiddle.net/nirmaljpatel/N5r4A/7/

To close the dialog on selecting one of the options; you should REMOVE the multiple=”multiple” attrib from your select tag… ie change

<select name="select-choice-0" id="select-choice-0" multiple="multiple" data-native-menu="false">

to

<select name="select-choice-0" id="select-choice-0" data-native-menu="false">

On a multi-select list; following will close the open dialog when “Close” option is clicked.

 $(function () {
  $('#select-choice-0').bind('change', function () {
      console.log('change in select', this);
      for (var i = 0; i < this.options.length; i++) {
          if (this.options[i].selected) {
              if(this.options[i].value == 'closeMe'){                                
                  console.log('...closing Dialog');
                  $('.ui-dialog').dialog('close');
              }
          }
      }
  });
 });​

Updated jsfiddle: http://jsfiddle.net/N5r4A/10/