JQUERY / JAVASCRIPT - Need to get value from <Select> on jquery dialog using JavaScript code

Question

I have a JQUERY based dialog box, which has a 'select' on it. When I click the button, I need to get hold of the select option value.

This is my JavaScript code:

            $( "#dialog-select" ).dialog({
                resizable: true,
                height:250,
                width:450,
                modal: true,
                buttons: {
                    "Ok": function() {

                        var priority = $('#dialog-select')
                        .find('select[name="priority"]');
                        var priorityString = JSON.stringify(priority);

                        alert('priorityString : ' + priorityString);

                        $( this ).dialog( "close" );
                        return true;                        
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                        return false;
                    }
                }
            });

The HTML for the dialog is written in JavaScript. This is below:

            $('#dialog-select').html('<p><span>Please select</span></p>'+
                            '<table>'+
                                '<tbody>'+
                                    '<tr>'+
                                        '<td align="left"><font size="1" color="red">*</font></td>'+
                                        '<td align="left"><label>New Priority</label></td>'+
                                        '<td>'+
                                            '<select name="priority">'+
                                                '<option value = "default">Please select...</option>'+
                                                '<option value = "h">High</option>'+
                                                '<option value = "m">Medium</option>'+
                                                '<option value = "l">Low</option>'+
                                            '</select>'+
                                        '</td>'+
                                    '</tr>'+
                                '</tbody>'+
                            '</table>'+
                            '<br/>');   

What I have done above doesn't work, please help :)

Answer 1

Since (on your page, given that specific html) you can only identify the select by its Name (without having to traverse the DOM), the quickest solution is:

 var selectedvalue =    $('select[name="priority"]').val();

I would suggest adding an ID to the dropdownlist, it will be a more efficient search. But hardly noticeable unless your page is huge, so it's more a ""good practice principle".

Please note: I used ' for the jQuery selector string, and " for the name value within the selector. You could use them the other way around, but they will have to be different.