单击下拉输入:无法在单击时转到顶部项目

我创建了一个下拉输入，当您单击项目时，它会转到页面。

<form id="work" action="" method="post">
    <select id="work-list" class="sub-topics" name="work">
    <?php $id = get_the_ID();
    $pages = get_pages(array('child_of' => $id, 'sort_column' => 'menu_order')); 
    foreach($pages as $post) {
    setup_postdata($post);
    $fields = get_fields(); ?>
        <option class="work-dropdown" value="<?php echo the_permalink(); ?>"><?php echo the_title(); ?></option>    
    <?php } wp_reset_query(); ?> 
    </select>           
</form>

Jquery：

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
   $('select[name="work"]').change(function(){
        window.location = $(this).val();
    })
});
</script>

目前，首页是下拉菜单旁边有一个勾号，因此单击它时，它不会转到该页面。如果您单击第二个项目，那么工作正常，只是它认为选择了顶部项目。

如何使顶部项目像其他项目一样可点击？

如果可能的话，我想避免在顶部输入选择，例如"单击此处选择页面"或类似内容。