jQuery UI Dialog won't open upon click -

jQuery UI Dialog won't open upon <select> click -

i'm trying open jquery ui dialog box when user clicks on select alternative such:

<select id="js-test" name="product_combination[<?php echo $combination_row; ?>][product_colour_sizes_option_value_colour_id]" > <?php foreach($list_of_colours $acolour){ ?> <option value="<?php echo $acolour['id']; ?>" id="<?php echo $acolour['id']; ?>" <?php if($acolour['id'] == $product_combination['product_colour_sizes_option_value_colour_id']){ ?> selected="selected" <?php } ?> > <?php echo $acolour['name'] ?> </option> <?php } ?> </select>

my dialog box afew lines above this:

<!-- start dialog box here --> <div id="mydialog" title="size selection"> <div class="box" style="display:none;"> dailog </div> </div> <!-- /end dialog box -->

and jquery code in external file such:

$(document).ready(function(){ //$("#mydialog").dialog({autoopen:false}); $("#mydialog").dialog({ autoopen:false, height:300, width:400, modal: true }); $("#js-test").click(function(){ $("#mydialog").dialog("open"); var selection = $('#js-test').find(':selected').text(); console.log(selection); }); });

my console logs display in console log expect them when select options clicked. dialog box remains no show. know why is?

turns out needed place dialog box after call! resolved.

jquery jquery-ui opencart jquery-ui-dialog