Question

I want to fire a jQuery dialog from a jump a menu. How do I do this?

Here is my script:

<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
    $( "#bulkConfirm" ).dialog({position:['middle',60],     
        open: function(event, ui) {  
        jQuery('.ui-dialog-titlebar-close').removeClass("ui-dialog-titlebar-close").html('<span style="float:right;"><img src="../images/x.png" /></span>');  
    },  
        dialogClass: 'ui-widget-shadow',
        modal: true,    
        autoOpen: false,
        width: '650px',
        close: function(ev, ui) {$(this).close();}
    });

    $( ".bulkConfirmOpen" ).click(function() {
        $( "#bulkConfirm" ).dialog( "open" );
        return false;
    });
});
</script> 

And here is my menu:

<select name="fieldname" size="1" onChange="go()" class="select" >
    <option selected="selected"><em>Questions Bulk Edit Options...</em></option>
    <option value="#">Change Category Assignments</option>
    <option class="bulkConfirmOpen" href="#" >Change Status to Approved</option>
    <option value="#">Move to Another Folder</option>
</select>

I want to open the dialog with the “Change Status to Approved” option. Currently it opens the dialog quickly, but then it immediately redirects to a page not found. The other menu items will be directed to other page links. A little help please?

Answer 1

you can try this: http://jsfiddle.net/TXkrM/

$(function () {
  $(".select").change(function () {
    if($('option:selected',this).attr('class')=='bulkConfirmOpen'){
       $(this).dialog();
    }
  });
});

Giving options a href attribute is not a valid way.